Gulp 管道中吞咽未处理的流错误

我一直在使用一个gulpfile，现在我已经修改它，尝试将sourcemaps添加到我编译的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.

---

是源映射文件导致了问题

执行

sourcemaps.write（'.'）

操作时，会将

.map

文件发送到流中。这意味着您的流中现在有两个文件：CSS文件和sourcemaps文件

当CSS文件到达

cssnano（）

时，它会缩小。但是，当sourcemaps文件到达

cssnano（）

时，就会发生错误

cssnano（）

尝试将文件解析为CSS，但由于sourcemaps文件不是有效的CSS文件，因此此操作失败，并抛出

cssnano（）

在使用
gulp.dest（）
将sourcemaps文件持久化到磁盘后，必须将其从流中删除。您可以为此使用插件：

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

在上面的
过滤器（'***.css'）
中，只允许css文件通过，而不允许sourcemaps文件通过，从而解决了问题

我还添加了第二个
sourcemaps.write（'.'）
，就在结尾之前，因为您可能希望将sourcemaps用于缩小和未统一的CSS文件。
如果您遇到管道错误，我发现这非常有帮助

/**
 * 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);
    }
  }
}

如果您使用
wrapPipe
包装任务函数，并将
.on（
error
，error）
方法放在所有管道上，如上例所示，它将大量捕获错误并指向问题文件，通常是第#行。不需要胶