gruntjs – 为什么建议使用concat然后丑陋,当后者可以做到这两个？

运行一个基本的测试，看看执行concat，然后是uglify和只是uglify之间的性能差异。

package.json

@H_673_21@{ "name": "grunt-concat-vs-uglify","version": "0.0.1","description": "A basic test to see if we can ditch concat and use only uglify for JS files.","devDependencies": { "grunt": "^0.4.5","grunt-contrib-concat": "^0.5.0","grunt-contrib-uglify": "^0.6.0","load-grunt-tasks": "^1.0.0","time-grunt": "^1.0.0" } }

Gruntfile.js

@H_673_21@module.exports = function (grunt) { // Display the elapsed execution time of grunt tasks require('time-grunt')(grunt); // Load all grunt-* packages from package.json require('load-grunt-tasks')(grunt); grunt.initConfig({ paths: { src: { js: 'src/**/*.js' },dest: { js: 'dist/main.js',jsMin: 'dist/main.min.js' } },concat: { js: { options: { separator: ';' },src: '<%= paths.src.js %>',dest: '<%= paths.dest.js %>' } },uglify: { options: { compress: true,mangle: true,sourceMap: true },target: { src: '<%= paths.src.js %>',dest: '<%= paths.dest.jsMin %>' } } }); grunt.registerTask('default','concat vs. uglify',function (concat) { // grunt default:true if (concat) { // update the uglify dest to be the result of concat var dest = grunt.config('concat.js.dest'); grunt.config('uglify.target.src',dest); grunt.task.run('concat'); } // grunt default grunt.task.run('uglify'); }); };

在src中，我放了一堆JS文件，包括jQuery的未压缩源，复制了几次，散布到子文件夹。比正常的网站/应用程序通常有多少。

结果，在两种情况下，连接和压缩所有这些文件所需的时间基本相同。
除非在concat上使用sourceMap：true选项(见下文)。

在我的电脑上：

@H_673_21@grunt default : 6.2s (just uglify) grunt default:true : 6s (concat and uglify)

值得注意的是，在这两种情况下产生的main.min.js是相同的。
此外，当合并文件时，丑陋会自动处理使用正确的分隔符。

唯一适用的情况是将sourceMap：true添加到concat选项中。
这会在main.js旁边创建@L_506_3@main.js.map文件，并导致：

@H_673_21@grunt default : 6.2s (just uglify) grunt default:true : 13s (concat and uglify)

但是如果生产站点只加载最小版本，则此选项是无用的。

我发现使用COncat之前丑陋的主要缺点。
当其中一个JS文件发生错误时，源地图将链接到并置的main.js文件，而不是原始文件。而当uglify做整个工作，它将链接到原始文件。

更新：
我们可以添加2个选项，uglify将链接uglify源贴图到concat源贴图，从而处理我的上述“缺点”。

@H_673_21@uglify: { options: { compress: true,sourceMap: true,sourceMapIncludesources: true,sourceMapIn: '<%= paths.dest.js %>.map',},target: { src: '<%= paths.src.js %>',dest: '<%= paths.dest.jsMin %>' } }

但它似乎非常不必要。

结论

我认为可以断言，如果我们使用uglify，我们可以把js文件连接，并将其用于其他目的，当需要时。