gulp:丑化和源图

2022-01-12 00:00:00 mapping javascript gulp gulp-sourcemaps

我正在使用 gulp.

I am using gulp.

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

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.

这就是我的做法:

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() 位置...

What I am not sure about is the sourcemaps.init() location...

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

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)?

推荐答案

这就是 sourcemap 在 Gulp 中的工作方式:您通过 gulp.src 选择的每个元素都会传输到一个虚拟文件对象中，包括缓冲区中的内容，以及原始文件名.这些通过您的流传输，内容在其中进行转换.

So this is how sourcemaps work in Gulp: Each element you select via gulp.src gets 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.

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

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.

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

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.

这是你的直播:

 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 实际上并不编写 sourcemaps，它只是告诉 Gulp 在您调用 gulp.dest 时将它们具体化为一个物理文件.

sourcemaps.write does not actually write sourcemaps, it just tells Gulp to materialize them into a physical file when you call gulp.dest.

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

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

相关文章