Javascript gulp: uglify 和 sourcemaps
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32502678/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
gulp: uglify and sourcemaps
提问by Serge
I am using gulp.
我正在使用吞咽。
I would like to having one or multiple JS files (say jQuery) to combine them in one, minify it, and write it to a distribution folder.
我希望有一个或多个 JS 文件（比如 jQuery）将它们合并为一个，将其缩小，然后将其写入分发文件夹。
This is how I do it:
这就是我的做法：
minifyJS(['/js/myModule.file1.js',
'/js/myModule.file2.js'], '/dist/js', 'myModule')
the function:
功能：
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
}
What I am not sure about is the sourcemaps.init()location...
我不确定的是sourcemaps.init()位置...
Should I create multiple (2 in my case) map files (that would be nice if is supported by browsers) or only one (/maps/myModule.map)?
我应该创建多个（在我的情况下为 2 个）地图文件（如果浏览器支持，那会很好）还是只创建一个（/maps/myModule.map）？
回答by ddprrt
So this is how sourcemaps work in Gulp: Each element you select via gulp.srcgets transferred into a virtual file object, consisting of the contents in a Buffer, as well as the original file name. Those are piped through your stream, where the contents get transformed.
所以这就是源映射在 Gulp 中的工作方式：您选择的每个元素都gulp.src被传输到一个虚拟文件对象中，该对象由缓冲区中的内容以及原始文件名组成。这些通过您的流进行管道传输，内容在其中进行转换。
If you add sourcemaps, you add one more property to those virtual file objects, namely the sourcemap. With each transformation, the sourcemap gets also transformed. So, if you initialize the sourcemaps after concat and before uglify, the sourcemaps stores the transformations from that particular step. The sourcemap "thinks" that the original files are the output from concat, and the only transformation step that took place is the uglify step. So when you open them in your browser, nothing will match.
如果添加源映射，则为这些虚拟文件对象再添加一项属性，即源映射。每次转换时，源图也会被转换。因此，如果您在 concat 之后和 uglify 之前初始化源映射，源映射将存储来自该特定步骤的转换。sourcemap“认为”原始文件是 concat 的输出，发生的唯一转换步骤是 uglify 步骤。因此，当您在浏览器中打开它们时，没有任何匹配项。
It's better that you place sourcemaps directly after globbing, and save them directly before saving your results. Gulp sourcemaps will interpolate between transformations, so that you keep track of every change that happened. The original source files will be the ones you selected, and the sourcemap will track back to those origins.
最好在 globbing 之后直接放置 sourcemaps，并在保存结果之前直接保存它们。Gulp 源映射将在转换之间进行插值，以便您跟踪发生的每个更改。原始源文件将是您选择的文件，源映射将追溯到这些源。
This is your stream:
这是你的流：
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.writedoes not actually write sourcemaps, it just tells Gulp to materialize them into a physical file when you call gulp.dest.
sourcemaps.write实际上并没有编写源映射，它只是告诉 Gulp 在您调用gulp.dest.
The very same sourcemap plugin will be included in Gulp 4 natively: http://fettblog.eu/gulp-4-sourcemaps/-- If you want to have more details on how sourcemaps work internally with Gulp, they are in Chapter 6 of my Gulp book: http://www.manning.com/baumgartner
Gulp 4 中将包含完全相同的源映射插件：http://fettblog.eu/gulp-4-sourcemaps/ -- 如果您想了解有关源映射如何在 Gulp 内部工作的更多详细信息，请参阅第 6 章我的 Gulp 书：http: //www.manning.com/baumgartner
