Gulp 构建序列损坏图像文件

Question

我对 Gulp 还很陌生，所以请耐心等待。我目前有一个 Angular 应用程序和一个使用 Gulp 的构建任务。

我将其设置为保留我的文件夹结构并将 html 文件复制到

dist

文件夹以进行生产构建。我的角度应用程序是串联和缩小的，除了我的图像之外，一切都按预期工作。我的 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 损坏二进制文件

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

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

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

Answer 2

这个问题很老了，但我最近遇到了这个问题。

我通过使用

{encoding: false}

图像配置修复了它。希望这有帮助

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