gulp: 丑化和源地图

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 select 的每个元素都被传输到一个虚拟文件对象中，该对象还包含缓冲区中的内容作为原始文件名。这些通过您的流传输，内容在这里得到转换。

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

最好在 globbing 之后直接放置 sourcemaps，并在保存结果之前直接保存它们。 Gulp sourcemaps 将在转换之间进行插值，以便您跟踪发生的每个变化。原始源文件将是您 select 编辑的文件，源地图将追溯到这些来源。

这是你的直播：

 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 时将它们具体化到一个物理文件中。

Gulp 4 将原生包含完全相同的 sourcemap 插件：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: 丑化和源地图

gulp: uglify and sourcemaps

javascript

mapping

gulp

gulp-sourcemaps