我使用Gulp来丑化javascript文件并生成它们的源映射。一切顺利:
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());
});
这段代码生成了以下输出文件夹和文件,它们被浏览器正确加载:
公共/js/someScript.min.js
function doSomeStuff(){console.log("This stuff function simply says: hello!!")
//# sourceMappingURL=maps/someScript.min.js.map
公共/js/地图/someScript.min.js。map:注意这个文件在上面的行中被引用。
然而,我也想gzip他们,所以我更新的gulpfile.js是:
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());
});
现在我得到这些文件:
公共/js/someScript.min.js.gz
function doSomeStuff(){console.log("This stuff function simply says: hello!!")}
//# sourceMappingURL=maps/someScript.min.js.map
公共/js/地图/someScript.min.js.map.gz
源映射没有被链接,因为js.gz文件引用了someScript.min.js。someScript.min.js.map.gz。我错过了什么?我如何使文件引用正确的扩展名?
我设法通过重命名生成的地图文件来解决这个问题,删除。gz扩展名:
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);
});
}
我已经把地图文件gunzip了。
var gunzip = require('gulp-gunzip');
// this task will depend on task sass, that generates the problem
gulp.task('uncompress_map', ['sass'], function () {
var maploc = 'src/build/maps';
return gulp.src(maploc+'/*.gz')
.pipe(gunzip())
.pipe(gulp.dest(maploc));
});