如何创建一个 Gulp 任务来进行缩小并将源映射正确地映射到 .min 文件

Question

我正在尝试创建一个 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，这似乎是这个过程的一个重要部分。

Answer 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'));

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

这个故事的寓意 - 不要想太多 - 我试图在一次操作中让它全部发挥作用。

如何创建一个 Gulp 任务来进行缩小并将源映射正确地映射到 .min 文件

How do I create a Gulp Task to do minification and source maps to a .min file properly

gulp

gulp-sourcemaps

gulp-rename