如何处理 gulp 中的 watchify 错误。 Watchify 防止报错

Question

当我在 browserify 捆绑器中包含 watchify 插件并且出现编译时错误时，该错误未被记录。

const gulp        = require('gulp');
const browserify  = require('browserify');            //js bundler
const watchify    = require('watchify');              //allows incremental bundling
const hbsfy       = require('hbsfy');                 //precompiles hbs files
const babelify    = require('babelify');              //ES2015 to ES5
const source      = require('vinyl-source-stream');   //Gulp and NodeJS stream interop. Use conventional text streams at the start of your gulp or vinyl pipelines, making for nicer interoperability with the existing npm stream ecosystem.
const buffer      = require('vinyl-buffer');          //Convert streaming vinyl files to use buffers. Usually used with vinyl-source-stream and gulp-sourcemaps
const uglify      = require('gulp-uglify');           //uglifyjs (js minimalizer) plugin for gulp (would be nice to use uglyfyjs directly)
const sourcemaps  = require('gulp-sourcemaps');       //generate source maps when tranforming js or css 
const gutil       = require('gulp-util');             //utlis for gulp, e.g. console logging

gulp.task("watch-js", function(done){
    var b = browserify({
        entries: 'main.js',
        debug: true,
        cache: {},
        packageCache: {},
      });
    b.external(config.vendorJsLibs);
    b.transform(hbsfy);
    b.transform(babelify, { presets: ['es2015'] });

    b.plugin(watchify); //when I comment this, errors are reported
    b.on('error', function(err){
       gutil.log(err.toString());
       this.emit('end');
       done();
    });
    compileJs(b, 'app.js');
    b.on('update', function(evt){
        gutil.log('watchify update '+ evt);
        compileJs(b, 'app.js');
    });    
});     

function compileJs(bundler, bundleFileName){
    return bundler.bundle()
        .pipe(source(bundleFileName))
        .pipe(buffer())
        .pipe(sourcemaps.init({loadMaps: true}))
            // Add transformation tasks to the pipeline here.
            .pipe(uglify())
            .on('error', function(error){
                gutil.log(error);
                this.emit('end');
            })
        .pipe(sourcemaps.write('./'))
        .pipe(gulp.dest(dest + '/scripts'));
}

Answer 1

您的包中没有任何错误处理程序，这就是节点崩溃并打印堆栈跟踪的原因。这是一种安全机制，可确保 error events 得到处理或中止执行。

观察listens 内部逻辑的捆绑器错误事件。这满足节点错误处理要求。

在您的代码中，您应该监听 b.bundle() 返回的流上的错误事件。下面的代码应该可以解决问题：

function compileJs(bundler, bundleFileName){
    return bundler.bundle()
        .on('error', gutil.log)
        ...
}

如何处理 gulp 中的 watchify 错误。 Watchify 防止报错

How handle watchify errors in gulp. Watchify prevent error from being reported

browserify

gulp

watchify