Gulp build sequence corrupts image files

Question

Im still fairly new with Gulp so please bear with me. I currently have an Angular app and a build task with Gulp.

I have it set up to preserve my folder structure and copy html files to a dist folder for the production build. My angular app is concatenated and minified, and everything is working as expected, except for my images. My svg, json, etc are also being copied correctly.

My images are being copied to the proper folder, but they are corrupted and dont show up.

Here is the relevant part of my gulpfile. Any help is appreciated.

var gulp        = require('gulp');
var del         = require('del');
var less        = require('gulp-less');
var useref      = require('gulp-useref');
var ngAnnotate  = require('gulp-ng-annotate');
var uglify      = require('gulp-uglify');
var gulpIf      = require('gulp-if');
var cssnano     = require('gulp-cssnano'); 

gulp.task('build', ['clean:dist'], function() {
    return gulp.src(['src/**/*.{html,svg,png,jpg,gif,css,json}'], {
            base: 'src'
        }).pipe(useref())
        .pipe(gulpIf('*.js', ngAnnotate()))
        .pipe(gulpIf('*.js', uglify()))
        .pipe(gulpIf('*.css', cssnano()))
        .pipe(gulp.dest('dist'));
});

gulp.task('clean:dist', function() {
    return del.sync('dist');
});

Answer 1

This question was quite old, but i faced this issue recently.

I fixed it by using {encoding: false} config for images. Hope this helps

gulp.task('copy-images', function(){
  return gulp
            .src('src/**/*.{svg,png,jpg,gif}', {encoding: false})
            .pipe(gulp.dest('dist'));
});