54

我正在使用吞咽。

我想要一个或多个 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）？

4

1 回答 1

116

这就是源映射在 Gulp 中的工作方式：您选择的每个元素都gulp.src被传输到一个虚拟文件对象中，该对象由 Buffer 中的内容以及原始文件名组成。这些通过您的流传输，内容在其中进行转换。

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

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

这是您的信息流：

 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 将包含相同的 sourcemap 插件：http://fettblog.eu/gulp-4-sourcemaps/ -如果您想了解更多关于 sourcemaps 如何在 Gulp 内部工作的详细信息，请参阅第 6 章我的 Gulp 书： http: //www.manning.com/baumgartner

于 2015-09-10T14:07:01.270 回答