gulp: uglify and sourcemaps

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

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

如果添加了sourcemaps，则为这些虚拟文件对象添加了一个属性，即sourcemap。对于每个转换，源映射也会被转换。因此，如果在concat之后和uglify之前初始化源映射，源映射将存储来自该特定步骤的转换。sourcemap"认为"原始文件是concat的输出，发生的唯一转换步骤是丑陋步骤。因此，当你在浏览器中打开它们时，没有任何内容匹配。

最好在globing之后直接放置sourcemaps，并在保存结果之前直接保存它们。Gulp sourcemaps将在转换之间插入，这样您就可以跟踪发生的每个更改。原始的源文件将是您选择的文件，并且源映射将跟踪到这些源文件。

这是你的流:

 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