Search code examples
javascriptnode.jsgulpgulp-concatgulp-uglify

Display javascript error when using gulp

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'}));   
});
Solution

  • 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.