Gulp build sequence corrupts image files

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');
});

gulp-useref corrupts binary files

My preferred method is to use separate tasks for the different types of files. For example:

gulp.task('build-js', function(){
        return gulp.src(['src/**/*.js'], {base: 'src'})
                .pipe(ngAnnotate())
                .pipe(uglify())
                .pipe(gulp.dest('dist'))
        ;
});

gulp.task('build-css', function(){
        return gulp.src(['src/**/*.css'], {base: 'src'})
                .pipe(cssnano())
                .pipe(gulp.dest('dist'))
        ;
});

gulp.task('build-html', function(){
        return gulp.src(['src/**/*.html'], {base: 'src'})
                .pipe(useref())
                .pipe(gulp.dest('dist'))
        ;
});

gulp.task('build-copy', function(){
        return gulp.src(['src/**/*.{svg,png,jpg,gif,json}'], {base: 'src'})
                .pipe(gulp.dest('dist'))
        ;
});

gulp.task('build', ['clean:dist', 'build-js', 'build-css', 'build-html', 'build-copy']);

This makes it easier to see what you're doing for each type of files and prevents accidentally performing an operation on the wrong type of file.