Javascript 狼吞虎咽：丑陋和原始地图

我在喝啤酒

我想让一个或多个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-in-my-case映射文件还是只支持一个/maps/myModule.map？

这就是sourcemaps在Gulp中的工作方式：通过Gulp.src选择的每个元素都被传输到一个虚拟文件对象中，该对象由缓冲区中的内容以及原始文件名组成。这些是通过你的流传输的，在那里内容被转换

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

最好在全局搜索之后直接放置sourcemaps，并在保存结果之前直接保存它们。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

write实际上并不编写sourcemaps，它只是告诉Gulp在调用Gulp.dest时将它们具体化为一个物理文件

---

Gulp 4本机将包含同样的sourcemap插件：-如果您想了解更多有关sourcemaps如何在内部与Gulp一起工作的详细信息，请参阅我的Gulp书的第6章：

非常感谢您提供的详细和有用的解释。。。那么，输入中有x2个文件，输出中只有一个文件这一事实又如何呢？我是否应该生成一个或多个sourcemaps以与mymodule.min.js文件一起包含在分发文件夹中？…Gulp将在那里为您创建正确的映射。如果您只有一个输出文件，并且只有一个sourcemap，sourcemap将理解源代码，并在开发工具中向您显示两个文件。如果你想为你的两个输出——正常输出和精简输出——创建sourcemaps，只需调用sourcemaps.write两次，但我认为使用sourcemaps，你将不再需要两个输出-我的意思是我有in1.js和in2.js2，还有一个out.min.js。。。有没有可能是in1.map和in2.map有意义，还是只有一个out.map有意义？这个答案——包括你的代码块——解决了我一年来关于映射的问题；这是正确引用单个JS文件的日志，而不是单个uglified script.min.JS。自学成才，真的很受欢迎。非常感谢。