gulp:uglify和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

这就是源图在Gulp中的工作原理:您选择的每个元素gulp.src都会被转移到一个虚拟文件对象中,该对象由Buffer中的内容以及原始文件名组成.这些是通过您的流传输,内容转换.

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

最好在globbing之后直接放置源图,并在保存结果之前直接保存它们.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.

同一个源映射插件将本身包含在Gulp 4中:http://fettblog.eu/gulp-4-sourcemaps/ - 如果您想了解源映射如何在内部与Gulp一起工作的更多细节,它们将在第6章中介绍.我的Gulp书:http://www.manning.com/baumgartner