管道中的毛管道错误

Question

我一直在使用墨西哥湾，我现在已经修改了以尝试在编译的CSS和缩小CSS文件中添加Sourcemaps。

我在文件中有以下任务：

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文件和一个sourcemaps文件。

当CSS文件到达cssnano()时，它会缩小。但是，当Sourcemaps文件到达cssnano()时，这是错误发生的时候。cssnano()试图以CSS为单位，但是由于Sourcemaps文件不是有效的CSS文件，因此失败，cssnano()抛出。

将其坚持使用gulp.dest()磁盘后，您必须从流中删除Sourcemaps文件。您可以使用gulp-filter插件：

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

在上面的filter('**/*.css')中，只能让CSS通过解决问题的CSS文件，而不是Sourcemaps文件。

我还在结束之前添加了第二个sourcemaps.write('.')

如果您遇到管道错误，我发现这非常有用

/**
 * 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)方法放在所有管道上，例如上面的示例，它将大量捕获错误并指向问题文件，并将行＃列入行＃。不需要古铁。