gulp：丑化和源图

Question

我正在使用 gulp。

我想要一个或多个 JS 文件（比如 jQuery）将它们组合成一个，缩小它，并将其写入分发文件夹。

这就是我的做法：

minifyJS(['/js/myModule.file1.js',
          '/js/myModule.file2.js'], '/dist/js', 'myModule')

功能：

function minifyJS(sourceFiles, destinationFolder, filenameRoot) {
    return gulp.src(sourceFiles)
        .pipe(plumber())

        // .pipe(sourcemaps.init()) here ???
        .pipe(concat(filenameRoot + '.js'))
        .pipe(sourcemaps.init()) // or here ???

        .pipe(gulp.dest(destinationFolder)) // save .js
        .pipe(uglify({ preserveComments: 'license' }))
        .pipe(rename({ extname: '.min.js' }))
        .pipe(gulp.dest(destinationFolder)) // save .min.js
        .pipe(sourcemaps.write('maps'))
        .pipe(gulp.dest(destinationFolder)) // save .map
}

我不确定的是sourcemaps.init() 位置...

我应该创建多个（在我的情况下是 2 个）地图文件（如果浏览器支持那就太好了）还是只创建一个 (/maps/myModule.map)？

Answer 1

这就是源映射在 Gulp 中的工作方式：您通过 gulp.src 选择的每个元素都被传输到一个虚拟文件对象中，该对象由 Buffer 中的内容以及原始文件名组成。这些通过您的流传输，内容在其中进行转换。

如果您添加源映射，您将向这些虚拟文件对象添加一个属性，即源映射。每次转换时，源映射也会被转换。因此，如果您在 concat 之后和 uglify 之前初始化 sourcemap，则 sourcemap 会存储该特定步骤的转换。源映射“认为”原始文件是 concat 的输出，发生的唯一转换步骤是 uglify 步骤。所以当你在浏览器中打开它们时，什么都不会匹​​配。

最好在 globbing 之后直接放置 sourcemap，并在保存结果之前直接保存它们。 Gulp 源图将在转换之间进行插值，以便您跟踪发生的每一个变化。原始源文件将是您选择的源文件，并且源映射将追溯到这些来源。

这是你的直播：

 return gulp.src(sourceFiles)
    .pipe(sourcemaps.init())
    .pipe(plumber())
    .pipe(concat(filenameRoot + '.js'))
    .pipe(gulp.dest(destinationFolder)) // save .js
    .pipe(uglify({ preserveComments: 'license' }))
    .pipe(rename({ extname: '.min.js' }))
    .pipe(sourcemaps.write('maps'))
    .pipe(gulp.dest(destinationFolder)) // save .min.js

sourcemaps.write 实际上并没有编写源映射，它只是告诉 Gulp 在您调用 gulp.dest 时将它们具体化为一个物理文件。

相同的 sourcemap 插件将包含在 Gulp 4 中：http://fettblog.eu/gulp-4-sourcemaps/ -- 如果您想了解更多关于 sourcemaps 如何在 Gulp 内部工作的详细信息，请参阅我的 Gulp 书的第 6 章：http://www.manning.com/baumgartner