使用 gulp-gzip 时 Gulp SourceMaps 不起作用答案

【问题标题】：Gulp SourceMaps not working when using gulp-gzip使用 gulp-gzip 时 Gulp SourceMaps 不起作用
【发布时间】：2015-07-10 08:23:58
【问题描述】：

我正在使用 Gulp 对 javascript 文件进行 uglify 并生成它们的源映射。到目前为止一切顺利：

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());
});

此代码生成以下输出文件夹和文件，它们已被浏览器正确加载：

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：请注意上面一行引用了这个文件。

但是我也想对它们进行 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());
});

现在我得到了这些文件：

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

未链接源映射，因为 js.gz 文件引用 someScript.min.js.map 而不是 someScript.min.js.map.gz .我错过了什么？如何使文件引用正确的扩展名？

【问题讨论】：

标签： node.js express gzip gulp gulp-sourcemaps

【解决方案1】：

我设法通过重命名生成的地图文件、删除 .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);
       });
}

【讨论】：

【解决方案2】：

我确实对地图文件进行了压缩。

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

【讨论】：