Display javascript error when using gulp

Question

hi all i am using gulp uglify and concat to minify js code.

However, i would like to have a way to detect any coding error in the original dev js code so that i can check the original code and not only notified after minified.

May I know how can i do it?

Below is my gulp code.

gulp.task('frontend.js', function() {  
  return gulp.src([paths.dev.js + 'jquery.js', paths.dev.js + 'bootstrap.js', paths.dev.js + 'basic.js'])
    .pipe(jsconcat('script.js'))
    .pipe(uglify())
    .pipe(gulp.dest(paths.assets.js))  // output: script.js
    .pipe( notify({message: 'frontend.js converted'}));   
});

score 2 · Accepted Answer · answered Oct 31 '14 at 10:25

That's what source maps are for.

var sourcemaps = require('gulp-sourcemaps');

gulp.task('frontend.js', function() {  
  return gulp.src([paths.dev.js + 'jquery.js', paths.dev.js + 'bootstrap.js', paths.dev.js + 'basic.js'])
    .pipe(jsconcat('script.js'))
    .pipe(sourcemaps.init())
    .pipe(uglify())
    .pipe(sourcemaps.write())
    .pipe(gulp.dest(paths.assets.js))  // output: script.js
    .pipe( notify({message: 'frontend.js converted'}));   
});

It'll append source maps (i.e. mapping each minified line to the original line) to frontend.js.

Now if you're using a modern browser such as Chrome or Firefox you'll see the original code.

score 0 · Answer 2 · answered Oct 31 '14 at 10:59

Do you mean that you want to be notified about javascript errors before concatenating and minifying your source files or that you want a way for being able to match a runtime error on the minified file with the original source file containing the offending code?

In the latter case mak answer if perfect, otherwise you should pipe, before the jsconcat, a call to gulp-jshint using maybe jshint-stylish as jshint reporter.

Display javascript error when using gulp

2 Answers2