問題描述

我正在使用 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

這篇關于gulp:丑化和源圖的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！