gulp-使用stream-combiner2整合 streams 來處理錯誤

原創

m0_37978717

2020-02-21 00:55

默認情況下，在 stream 中發生一個錯誤的話，它會被直接拋出，除非已經有一個時間監聽器監聽着 error 時間。這在處理一個比較長的管道操作的時候會顯得比較棘手。

通過使用 stream-combiner2，你可以將一系列的 stream 合併成一個，這意味着，你只需要在你的代碼中一個地方添加監聽器監聽 error 時間就可以了。

安裝

npm install --save-dev stream-combiner2

流合併方式監控錯誤： http://www.gulpjs.com.cn/docs/recipes/combining-streams-to-handle-errors/

這裏是參考上面gulp官網中的例子進行測試。

var gulp = require('gulp');
var uglify = require('gulp-uglify');
gulp.task('test',function(){
    //正常走binary管道的方式 （故意寫錯js，出錯也拋異常，但是找不到錯誤在哪）
    gulp.src('src/*.js')
        .pipe(uglify())
        .pipe(gulp.dest('dest'));
});

我這裏故意將src目錄下的test,js測試文件寫錯：

function a(){
    return 11ture;
}
a();

然後git bash運行 gulp test，運行結果如下圖:

是不是瞬間不想活了，反正我看起來是一臉的懵逼。。。

然而這一切在有了stream-combiner2之後，就完全不一樣了。

這是使用stream-combiner2的代碼，綁定了默認任務，省的麻煩每次都還要寫gulp test ：

var gulp = require('gulp');
var combiner = require('stream-combiner2');
var uglify = require('gulp-uglify');
gulp.task('test',function(){
    //流合並監聽的方式 （故意寫錯了js，能夠監聽到錯誤處在哪個文件，和錯誤的具體位置）
    var combined = combiner.obj([
        gulp.src('src/*.js'),
        uglify(),
        gulp.dest('dest')
    ]);
    //監聽錯誤
    combined.on('error',console.error.bind(console));
    return combined;
});
gulp.task('default',['test']);

執行gulp輸出結果如下圖：

它會把錯誤的信息、文件名、行數、列數·、位置、是執行哪個插件出現的錯誤，錯誤文件的路徑，錯誤時間等等詳細的信息都列出來。

不僅如此，大家有沒有發現一個小細節，就是使用了stream-combiner2的方式，在執行uglify的時候沒有通過管道。

這裏我也很奇怪，gulp不是通過binary pipe方式執行的麼，這裏爲什麼不需要通過管道了呢?

看了github上的文檔才知道，它會把pipe管道轉換成stream流的形式。