Browserify errors ending gulp watch task

Question

I've got the following setup in my gulpfile.js:

gulp.task('browserify', function() {
    browserify(config.paths.browserifyEntry)
        .transform(reactify)
        .bundle()
        .pipe(source('master.js'))
        .pipe(gulp.dest(config.paths.dist))
        //.pipe(connect.reload());
});

gulp.task('watch', function () {
    gulp.watch(config.paths.components, ['browserify']);
    gulp.watch(config.paths.sassSource, ['sass']);
});

This all works perfectly until I'm writing code that results in a browserify error. This happens frequently as I'm editing code in one file that is dependent on a change I haven't yet made in another file, browserify errors out.

The problem is that when browserify errors out it ends the watch task. I would expect that when browserify errors, it simply doesn't finish it's task but that the watch would continue so that when I make other changes that would allow browserify to run successfully it will do so. It is problematic to be making changes and then to reload the browser and find that it's not working only to find that the watch process ended due to a browserify error when your code was in an erroneous state.

Is there a way to swallow that error so that it doesn't stop the watch process? Or is there another npm package that watches files and doesn't get tripped up by the browserify error?

Answer 1

If you don't handle the error event, the stream will throw. You could handle the event directly:

gulp.task('browserify', function() {
    browserify(config.paths.browserifyEntry)
        .transform(reactify)
        .bundle()
        .on('error', console.error.bind(console))
        .pipe(source('master.js'))
        .pipe(gulp.dest(config.paths.dist));
});

Or you could catch the error after it throws:

process.on('uncaughtException', console.error.bind(console));

Answer 2

For Browserify streams you need to call emit in error handler:

gulp.task('browserify', function() {
  browserify(config.paths.browserifyEntry)
  .transform(reactify)
  .bundle()
  .on('error', function (error) {
    console.error(error.toString())
    this.emit('end')
  })
  .pipe(source('master.js'))
  .pipe(gulp.dest(config.paths.dist));
});