gulp：uglify和sourcemaps [英] gulp: uglify and sourcemaps

问题描述

我正在使用gulp。

我希望将一个或多个JS文件（比如说jQuery）合并成一个文件，缩小文件并将其写入分发文件夹。

这是我的做法：

  minifyJS（['' /js/myModule.file1.js'，
'/js/myModule.file2.js']，'/ dist / js'，'myModule'）
  pre 
 $ b $ 函数：
 
 
 函数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））//保存.js 
 .pipe（uglify（{preserveComments：'license'}））
 .pipe（rename（ {extname：'.min.js'}））
 .pipe（gulp.dest（destinationFolder））//保存.min.js 
 .pipe（sourcemaps.write（'maps'））
 .pipe（gulp.dest（destinationFolder））//保存.map 
} 
  
我不确定的是 sourcemaps.init（）位置... 
 
 
 
我应该创建多个（在我的情况下是2）地图文件（如果浏览器支持，这会很好）或者只有一个（ /maps/myModule.map ）？ 
 
 gulp.src 选择的每个元素都被转移到一个虚拟文件中对象，由Buffer中的内容以及原始文件名组成。这些通过您的流传输，内容被转换。
 
 
 
如果添加源映射，则会向这些虚拟文件对象添加一个属性，即源映射。随着每次转换，源图也会被转换。因此，如果您在concat之后和uglify之前初始化源映射，则源映射会存储该特定步骤的变换。源图认为原始文件是concat的输出，唯一发生的转换步骤是uglify步骤。因此，当你在浏览器中打开它们时，没有任何东西可以匹配。
 
 
 
最好是在源代码之后直接放置源代码，并在保存结果之前直接保存它们。  Gulp源地图将在两次转换之间进行插值，以便跟踪每次发生的变化。原始源文件将是您选择的源文件，源代码将追溯到这些源文件。
 
 
 
这是您的流：
  return gulp.src（sourceFiles）
 .pipe（sourcemaps.init（））
 .pipe（plumber（））
 .pipe（concat（filenameRoot +'.js'））
 .pipe（gulp.dest（destinationFolder））//保存.js 
 .pipe（uglify（{preserveComments：'license'}）） 
 .pipe（重命名（{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内部工作的细节，请参阅我的Gulp书籍的第6章： a href =http://www.manning.com/baumgartner =noreferrer> http://www.manning.com/baumgartner  
 
I am using gulp. 

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. 

This is how I do it: 
minifyJS(['/js/myModule.file1.js',
          '/js/myModule.file2.js'], '/dist/js', 'myModule')
the function: 
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
}
What I am not sure about is the sourcemaps.init() location...   

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)?
解决方案
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.

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.

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.

This is your stream:
 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 does not actually write sourcemaps, it just tells Gulp to materialize them into a physical file when you call gulp.dest. 

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：uglify和sourcemaps的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！