如何创建 Gulp 任务以正确执行缩小和源映射到 .min 文件答案

【问题标题】：How do I create a Gulp Task to do minification and source maps to a .min file properly如何创建 Gulp 任务以正确执行缩小和源映射到 .min 文件
【发布时间】：2015-12-20 01:32:41
【问题描述】：

我正在尝试创建一个 gulp 任务来同时压缩和创建源映射。压缩和源映射创建工作，但我似乎无法弄清楚如何在使用 gulp-rename 插件时获得正确的输出名称。

为了简化：我在/src 文件夹中有一个source.js 文件，我想在/dist 文件夹中创建.min.js 和.js.map 文件。

这是我所拥有的：

gulp.task('scripts', function () {

// compressed
gulp.src(['src/*.js'])
    .pipe(sourcemaps.init({ includeContent: false, sourceRoot: './' }))        
    .pipe(uglify())        
    .pipe(sourcemaps.write('./', {
        sourceMappingURL: function(file) {
            return file.relative + '.map';
        }
    }))
    .pipe(rename({ suffix: '.min' }))
    .pipe(gulp.dest('./dist'));
});

这会在/dist 中创建以下内容：

jquery-resizable.min.js（一切都好 - 压缩，地图参考和正确的名称）
jquery-resizable.js.min.map（地图在那里，但名称不好 - 应该是 jquery-resizable.js.map）

我尝试了很多变体，但我不知道如何获取地图和压缩以构建和获取正确的文件名。

我还尝试在单独的步骤中重命名文件，但由于 gulp 的异步特性，它不能可靠地工作 - 有时它可以工作，有时它不能，所以这似乎也不是一个选项。

我错过了什么？

我不喜欢以这种方式创建源映射，但正确的方法是什么？我见过的所有示例似乎都在做我上面所做的事情，除了它们没有将输出文件重命名为 min.js，这似乎是该过程的重要部分。

【问题讨论】：

正确的文件名是什么？ jquery-resizable.js.map?
是的。更新问题以澄清
你在 sourcemap 之前尝试过重命名吗？
是的 - 结果相同。问题一旦重命名，它就适用于链中的所有内容。不适合一步完成所有工作，但如果你卸载到一个单独的步骤或任务异步会咬你。

标签： gulp gulp-sourcemaps gulp-rename

【解决方案1】：

我建议在重命名期间使用gulp-filter 从管道中删除.map 文件。

var jsFilter = require('gulp-filter')([ '*.js', ], { restore: true, });
gulp.src(['src/*.js'])
    .pipe(sourcemaps.init({ includeContent: false, sourceRoot: './' }))        
    .pipe(uglify())        
    .pipe(sourcemaps.write('./', {
        sourceMappingURL: function(file) {
            return file.relative + '.map';
        }
    }))
    .pipe(jsFilter)
    .pipe(rename({ suffix: '.min' }))
    .pipe(jsFilter.restore)
    .pipe(gulp.dest('./dist'));

也就是说，我们的工作流程会在源地图之前进行重命名，并正确生成地图。

gulp.src(['src/*.js'])
    .pipe(sourcemaps.init())        
    .pipe(uglify())        
    .pipe(rename({ suffix: '.min', }))
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest('./dist'));

【讨论】：

谢谢@bdukes。使用 jsfilter 的第一个示例可以工作，但并不特别高兴它需要一个额外的插件和这种不可读的语法来完成如此常见的简单事情。不过谢谢 - 这至少可以工作并删除我额外的 fix 任务。第二个例子对我不起作用——它仍然为我产生jquery-resizable.min.js.map。我在 gulp-rename 周围的一些线程中看到它应该知道源映射插件，但它似乎没有做正确的事情。无论哪种方式 - 都应该有一种更简单、更自然的表达方式来完成这项工作。
在我的第二个示例中，它生成名称中带有 .min 的 .map 文件，但这与 .min.js 文件中的声明相匹配，因此一切正常。您是否担心命名是因为它不起作用，还是出于审美原因？
另外，请考虑运行npm outdated 以查看您的某些插件是否需要更新。

【解决方案2】：

@bdukes 的回答主要解决了我的问题，并引导我找到了正确的解决方案。我根据他的回答发布了在我上面提到的特定情况下对我有用的实际解决方案。

我的一个问题与无法生成原始源文件以及压缩和映射文件有关。我能够通过一个额外的步骤在单独的.pipe(gulp.dest('./dist')) 操作中显式移动文件来使其工作：

gulp.task('scripts', function () {

    // compress and source map
    gulp.src(['src/*.js'])
        .pipe(sourcemaps.init({ includeContent: false, sourceRoot: './' }))
        .pipe(uglify())   
        .pipe(sourcemaps.write('.', {
            sourceMappingURL: function(file) {
                return file.relative + '.map';
            }
        }))        
        .pipe(jsFilter)
        .pipe(rename({ suffix: '.min' }))
        .pipe(jsFilter.restore)
        .pipe(gulp.dest('./'));

    // also copy source files
    gulp.src(['src/*.js'])
        .pipe(gulp.dest('./dist'));
});

故事的寓意 - 不要想太多 - 我试图在一次操作中完成所有工作。

【讨论】：