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

这是导致问题的源映射文件。

当您这样做时，sourcemaps.write('.')您会将.map文件发送到流中。这意味着您的流中现在有两个文件：一个 CSS 文件和一个 sourcemaps 文件。

当 CSS 文件到达时，cssnano()它会被缩小。但是，当源映射文件到达时，cssnano()就会发生错误。cssnano()尝试将文件解析为 CSS，但由于 sourcemaps 文件不是有效的 CSS 文件，因此会失败并cssnano()抛出异常。

在使用 .sourcemaps 文件将其持久保存到磁盘后，您必须从流中删除它gulp.dest()。您可以使用该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文件通过，不让sourcemaps文件通过，这解决了问题。

我还在sourcemaps.write('.')最后添加了第二个，因为您可能需要缩小和未缩小的 CSS 文件的源映射。