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

これは、それが簡単にあなたがファイルの種類ごとにやっていると誤ってファイルの間違った種類の操作を実行防止かを確認することができます。