本博客不欢迎：各种镜像采集行为，请尊重知识产权法律法规。大家都是程序员，不要闹得不开心。

安装好grunt后，苏南大叔下一步的计划就是配置Gruntfile.js这个配置文件。在这个文件中，苏南大叔采用的是一种比较简单易懂的方案。处理的文件目标是：把很多个分散的js文件，合并为一个all.min.js文件。这样做的好处是：可以有效的减少浏览器的并发数，加快网页浏览。

安装grunt构建工具

grunt构建工具的安装，是有些奇怪的。需要全局安装grunt-cli，然后本地安装grunt。本篇文章里面，不做详细描述。可以参考下面这个链接：

安装grunt插件

要使用grunt压缩合并js文件，需要的插件是：grunt-contrib-uglify和grunt-contrib-concat。grunt-contrib-uglify是负责压缩处理js文件的，背后就是大名鼎鼎的uglifyjs。

grunt-contrib-concat是负责合并所有的.min.js文件的。

所以，需要的命令行是：npm install grunt-contrib-uglify grunt-contrib-concat --save

如何使用 grunt 插件压缩合并 js ？减少页面请求数的秘诀(图3-1)

设置Gruntfile.js配置压缩js方案

Gruntfile.js的外部套路部分，这里就不额外讲述了。下面仅仅给出Gruntfile.js的核心代码。module.exports = function (grunt) {

pkg: grunt.file.readJSON('package.json');

grunt.initConfig({

uglify: {

// 这里是uglify任务的配置信息

options: {

},

static_mappings: {

files: [{

src: 'js/jquery-2.1.4.min.js',

dest: 'build/jquery.min.js'

},{

src: 'lib/bootstrap-3.3.7/js/bootstrap.min.js',

dest: 'build/bootstrap.min.js'

},{

src: 'js/jquery.pjax.js',

dest: 'build/jquery.pjax.min.js'

}],

}

},

concat: {

js: {

src: ["build/*.js"],

dest: 'dest/all.min.js',

options :{

separator: ';',//分割符

stripBanners: true//去掉代码中的块注释

},

},

},

});

grunt.loadNpmTasks('grunt-contrib-uglify');

grunt.loadNpmTasks('grunt-contrib-concat');

grunt.registerTask('default', ['uglify', 'concat']);

}

上述文件配置好之后，在Gruntfile.js所在目录执行grunt命令即可完成js文件的合并与压缩。压缩后的.min.js文件位于build目录之中。而合并的all.min.js文件位于dest目录。

如何使用 grunt 插件压缩合并 js ？减少页面请求数的秘诀(图3-2)

可能存在的问题

all.min.js文件是生成了，但是并不代表着这事就万事大吉了。因为正常页面的原来分散的js之间是有先后依赖顺序的。而合并(concat)的过程里面，src设置为build/*.js。这样的话，就没有先后顺序的说法了。

所以，很有可能发生的情况就是：你删除了各个分散的js文件，换成all.min.js后，页面会报js错误，比如某某没有定义，某某没有某属性之类的。

设置合并js的顺序

定义合并js顺序的办法也很简单，就是：设置contact.[name].src数组，顺序写入各个要合并的js即可，就是说不用通配符*，而是顺序写入文件。比如：concat: {

js: {

options :{

separator: ';',//分割符

stripBanners: true//去掉代码中的块注释

},

src:["build/jquery.min.js",

"build/bootstrap.min.js",

"build/jquery.pjax.min.js" ],

dest: 'dest/all.min.js'

},

},

这个conact的配置就是说，把src所配置的build目录下面的.min.js文件，按顺序合并成dest/all.min.js文件。而build目录下面的.min.js文件，则是uglify这个任务里面，执行获得的。

Gruntfile.js配置文件描述

下面对本文涉及的Gruntfile.js进行一下总结。共涉及两个插件grunt-contrib-uglify和grunt-contrib-concat。两者使用grunt.loadNpmTasks()定义的。

uglify任务(去掉了grunt-contrib-字样)，负责把每个单独的js压缩(混淆)成多个.min.js文件。

concat任务里面，可以定义多个合并任务。这里就定义了一个分支任务js。在这个分支任务里面，通过src数组，顺序定义了已经压缩好的.min.js文件，最终合并得到了all.min.js文件。

如何使用 grunt 插件压缩合并 js ？减少页面请求数的秘诀(图3-3)

使用方式

得到了最终的合并顺序可控的all.min.js文件后，就可以把页面内所有的js引用都删除掉，然后再只加载这个最终的all.min.js即可。

这个合并的得到的js，因为毕竟有js的路径变化。那么理论上来说，可能会发生附带资源的加载失败风险。所以，请记得测试后再使用。

如果本文对您有帮助，或者节约了您的时间，欢迎打赏瓶饮料，建立下友谊关系。

本博客不欢迎：各种镜像采集行为。请尊重原创文章内容，转载请保留作者链接。