Errors contain ANSI Escape Codes

If I run babel directly in bash on a file with a syntax error, it outputs a nice colored error message that points to the syntax error.

When I do the same thing via gulp/browserify/babelify, the output contains raw ANSI escape codes. It’s as if whatever is retrieving the output of babel is escaping it, causing the embedded escape codes to be, well, escaped. This makes the error message really difficult to understand, slowing down development.

My gulp task looks like this:

var b = browserify({
    entries: PATHS.mainjs,
    debug: true,
    noParse: ["jquery"]
});
b.on('log', gutil.log);

b = b.transform(babelify);

return b.bundle()
    .pipe(source(PATHS.bundlejs))
    .on('error', gutil.log)
    .pipe(gulp.dest(PATHS.dist + '/js'));

The error looks like this:

SyntaxError: d:/git/exceptionsweb/src/js/pages/app.js: Unexpected token (43:14)
?[0m  41 |                                              ?[36mthis?[39m?[1m.?[22mstate?[1m.?[22mprojectsLoading
  42 |                                                  ?[1m??[22m ?[1m<?[22mdiv?[1m>?[22mLoading?[1m...?[22m?[1m<?[22m?[1m/?[22mdiv?[1m>?[22m

The “?” are actually the escape character, but that doesn’t translate well here.

I’m also not really sure how this error is being output. It’s not coming from my on(“error”) callback, because I get it even if I comment that out. Same with on(“log”). It’s like babel is writing directly to the output.

babelify 6.3.0 babel-core 5.8.25 gulp 3.9.0

Any help would be appreciated!

[InfinitiesLoop]

Here we go, getting fancy now.

    .on("error", function(err) {
        if (err && err.codeFrame) {
            gutil.log(
                gutil.colors.red("Browserify error: "),
                gutil.colors.cyan(err.filename) + ` [${err.loc.line},${err.loc.column}]`,
                "\r\n" + err.message + "\r\n" + err.codeFrame);
        }
        else {
            gutil.log(err);
        }
        this.emit("end");
    })

[InfinitiesLoop]

Thanks. I settled on this after some searching:

    .on("error", function(err) {
        gutil.log(err.message + "\r\n" + err.codeFrame);
        this.emit("end");
    })

That seems to give a nice output, but I’m unsure whether all the types of errors it might get would map well to this. Thanks for your help!