Gulpパイプで未処理のストリームエラー

Question

gulpfileを使用していますが、私はコンパイル済みのcssファイルと圧縮されたcssファイルにソースマップを追加しようとしました。

私は、ファイル内に次のタスクがあります。コンパイルしようとしたときに

gulp.task('sass', function() { 
return gulp.src('./src/sass/zebra.scss') 

    .pipe(sourcemaps.init()) 
     .pipe(sass().on('error', sass.logError)) 
     .pipe(autoprefixer({ 
      browsers: autoprefixrBrowsers, 
      cascade: false 
     })) 
    .pipe(sourcemaps.write('.')) 
    .pipe(gulp.dest(destination)) 
    .pipe(cssnano()) 
    .pipe(rename({ 
     suffix: '.min' 
    })) 
    .pipe(gulp.dest(destination)); 
}); 

をしかし、私は次のエラーを取得する：

stream.js:74 
    throw er; // Unhandled stream error in pipe. 

Answer 1

それが問題を引き起こしているsourcemapファイルです。

sourcemaps.write('.')を実行すると、.mapファイルがストリームに出力されます。つまり、ストリームにはCSSファイルとソースマップファイルの2つのファイルがあります。

CSSファイルがcssnano()になると、サイズが小さくなります。しかし、sourcemapsファイルがエラーの発生時にcssnano()に達すると、 cssnano()はファイルをCSSとして解析しようとしますが、ソースマップファイルは有効なCSSファイルではないため、これは失敗し、cssnano()がスローアップします。

gulp.dest()でディスクに永続化した後、ストリームからソースマップファイルを削除する必要があります。あなたはこのためにgulp-filterプラグインを使用することができます。上記のfilter('**/*.css')で

var filter = require('gulp-filter'); 

gulp.task('sass', function() { 
    return gulp.src('./src/sass/zebra.scss') 

    .pipe(sourcemaps.init()) 
     .pipe(sass().on('error', sass.logError)) 
     .pipe(autoprefixer({ 
      browsers: autoprefixrBrowsers, 
      cascade: false 
     })) 
    .pipe(sourcemaps.write('.')) 
    .pipe(gulp.dest(destination)) 
    .pipe(filter('**/*.css')) 
    .pipe(cssnano()) 
    .pipe(rename({ 
     suffix: '.min' 
    })) 
    .pipe(sourcemaps.write('.')) 
    .pipe(gulp.dest(destination)); 
}); 

は、唯一の問題を修正し、ないsourcemapsファイルを介して、CSSファイルをすることができます。

また、拡張されたCSSファイルと未確認のCSSファイルの両方にソースマップが必要な場合があるので、最後にもう一度sourcemaps.write('.')を追加しました。

Answer 2

あなたがパイプラインのエラーに実行している場合は、私は、あなたがwrapPipeとタスク機能をラップし、上記の例のようにすべてのあなたのパイプに.on(エラー, error)方法を置く場合thisが

/** 
* Wrap gulp streams into fail-safe function for better error reporting 
* Usage: 
* gulp.task('less', wrapPipe(function(success, error) { 
* return gulp.src('less/*.less') 
* .pipe(less().on('error', error)) 
* .pipe(autoprefixer().on('error', error)) 
* .pipe(minifyCss().on('error', error)) 
* .pipe(gulp.dest('app/css')); 
* })); 
*/ 
function wrapPipe(taskFn) { 
    return function(done) { 
    var onSuccess = function() { 
     done(); 
    }; 
    var onError = function(err) { 
     done(err); 
    } 
    var outStream = taskFn(onSuccess, onError); 
    if(outStream && typeof outStream.on === 'function') { 
     outStream.on('end', onSuccess); 
    } 
    } 
} 

非常に有用であることが判明エラーを多大に捉え、問題ファイルと行番号を指摘します。ガットルは必要ありません。