Question

我尝试创建gulp任务来同时压缩和创建源地图。压缩和源地图创建有效，但我似乎无法弄清楚如何在使用gulp-rename插件时正确获取输出名称。

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

以下是我所拥有的：

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，这似乎是该过程的重要部分。< / p>

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文件

2 个答案: