Gulp Browserify Standard Error Log

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 error log:

It is clear and beautiful, I like it.

But in order for my watch to work, I need to handle the error, and not let it go, 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 would prefer to avoid painfully reproducing it by combining chalk, gutil and reading the error file, but somehow used the same function.

Answer 1

It turns out that the browser uses the syntax-error module and, thus, generates rich error objects containing the ready-made console property codeFrame .

I can catch the error as follows:

 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 gulp-util

for this result: