I am using Gulp to uglify javascript files and generate their source map. So far so good:
var gulp = require('gulp');
var plugins = require('gulp-load-plugins')();
gulp.task('compress-js', ['clean-js'], function() {
return gulp.src('./resources/js/**/*.js')
.pipe(plugins.sourcemaps.init())
.pipe(plugins.uglify())
.pipe(plugins.rename({extname: '.min.js'}))
.pipe(plugins.sourcemaps.write('./maps'))
.pipe(gulp.dest('./public/js'))
.pipe(plugins.livereload());
});
This code generates the following output folders and files, which are correctly loaded by the browser:
public/js/someScript.min.js
function doSomeStuff(){console.log("This stuff function simply says: hello!!")
//# sourceMappingURL=maps/someScript.min.js.map
public/js/maps/someScript.min.js.map: Notice this file is referenced in the line above.
However I would also like to gzip them so my updated gulpfile.js is:
gulp.task('compress-js', ['clean-js'], function() {
return gulp.src('./resources/js/**/*.js')
.pipe(plugins.sourcemaps.init())
.pipe(plugins.uglify())
.pipe(plugins.rename({extname: '.min.js'}))
.pipe(plugins.sourcemaps.write('./maps'))
.pipe(plugins.gzip())
.pipe(gulp.dest('./public/js'))
.pipe(plugins.livereload());
});
Now I get these files:
public/js/someScript.min.js.gz
function doSomeStuff(){console.log("This stuff function simply says: hello!!")}
//# sourceMappingURL=maps/someScript.min.js.map
public/js/maps/someScript.min.js.map.gz
The source map is not being linked because, the js.gz file references someScript.min.js.map instead of someScript.min.js.map.gz. What am I missing? How can I make the file reference the correct extension?
I managed to solve this by renaming the generated map files, removing the .gz extension:
gulp.task('compress-js', function(cb) {
gulp.src('./resources/js/**/*.js')
.pipe(plugins.jshint())
.pipe(plugins.sourcemaps.init())
.pipe(plugins.uglify())
.pipe(plugins.rename({extname: '.min.js'}))
.pipe(plugins.sourcemaps.write('./maps'))
.pipe(plugins.gzip({ append: true }))
.pipe(gulp.dest('./public/js'))
.pipe(plugins.livereload())
.on('end', function() {
postProcessMapFiles('./public/js/maps/**/*.map.gz', './public/js/maps', cb);
});
});
function postProcessMapFiles(compressedMapFiles, publicDir, cb){
gulp.src(compressedMapFiles)
.pipe(plugins.debug())
.pipe(plugins.rename({extname: ''}))
.pipe(plugins.debug())
.pipe(gulp.dest(publicDir))
.on('end', function() {
del([compressedMapFiles], cb);
});
}