Gulp 构建序列损坏图像文件

Question

我还是 Gulp 的新手，所以请多多包涵。我目前有一个 Angular 应用程序和一个 Gulp 构建任务。

我已将其设置为保留我的文件夹结构并将 html 文件复制到 dist 文件夹以用于生产构建。我的 Angular 应用程序被连接和缩小，一切都按预期工作，除了我的图像。我的 svg、json 等也被正确复制了。

我的图片正在被复制到正确的文件夹，但它们已损坏并且不显示。

这是我的gulpfile 的相关部分。任何帮助表示赞赏。

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

gulp-useref corrupts binary files

我的首选方法是对不同类型的文件使用单独的任务。例如：

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

这样可以更轻松地查看您对每种类型的文件执行的操作，并防止意外对错误类型的文件执行操作。