Gulp在管道中未处理的流错误

Question

我一直在使用一个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. 

Answer 1

这是造成问题的sourcemap文件。

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

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

您必须从流中删除源地图文件，然后将其持久保存到磁盘上，并使用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')只有通过，而不是sourcemaps文件，它解决了这个问题让CSS文件。

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

Answer 2

如果您运行到管道的错误，我发现this如果用wrapPipe包任务功能，并把.on(错误, error)方法上所有的管道像上面的例子是非常有益

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

，它将大量地捕捉错误并指向问题文件，并且通常是行＃。没有gutil需要。