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