5

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

4

2 回答 2

3

我建议在重命名期间使用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'));
于 2015-12-21T15:06:22.673 回答
1

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

故事的寓意——不要想太多——我试图让这一切在一次行动中发挥作用。

于 2016-01-09T21:09:26.597 回答