Standard error log in Gulp Browserify

Question

With this task:

gulp.task("es6", function () {
      return browserify({entries: 'src/main/es6/main.js', extensions: ['.js'], debug: true})
      .transform(babelify)
      .bundle()
      .pipe(source('superpos.js'))
      .pipe(streamify(uglify()))
      .pipe(gulp.dest('src/main/webapp'));
});

I get this kind of error log:

It's clear and pretty, I like it.

But in order to keep my watch running, I need to handle the error instead of letting it pass, something like

  ...
  .transform(babelify)
  .bundle()
  .on('error', function(error){
        // pretty error print
        this.emit('end');
  })
  ...

How can I reproduce the same error log here?

I'd prefer to avoid painfully reproducing it by combining chalk, gutil and reading the errorring file but to use the same function somehow.

Answer 1

It turns out that browserify uses the syntax-error module and thus throws rich error objects containing a console-ready codeFrame property.

I can intercept the error like this:

gulp.task("es6", function () {
      return browserify({entries: 'src/main/es6/main.js', extensions: ['.js'], debug: true})
      .transform(babelify)
      .bundle()
      .on('error', function(err){
            if (err instanceof SyntaxError) {
                  gutil.log(gutil.colors.red('Syntax Error'));
                  console.log(err.message);
                  // console.log(err.filename+":"+err.loc.line);
                  console.log(err.codeFrame);
            } else {
                  gutil.log(gutil.colors.red('Error'), err.message);
            }
            this.emit('end');
      })
      .pipe(source('superpos.js'))
      .pipe(streamify(uglify()))
      .pipe(gulp.dest('src/main/webapp'));
});

where gutil is gulp-util

for this result: