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

我们相信：世界是美好的，你是我也是。平行空间的世界里面，不同版本的生活也在继续...

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

安装grunt构建工具

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

• https://newsn.net/say/grunt-config.html

安装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

设置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目录。

可能存在的问题

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文件。

使用方式

得到了最终的合并顺序可控的all.min.js文件后，就可以把页面内所有的js引用都删除掉，然后再只加载这个最终的all.min.js即可。
这个合并的得到的js，因为毕竟有js的路径变化。那么理论上来说，可能会发生附带资源的加载失败风险。所以，请记得测试后再使用。

如果本文对您有帮助，或者节约了您的时间，欢迎打赏瓶饮料，建立下友谊关系。
本博客不欢迎：各种镜像采集行为。请尊重原创文章内容，转载请保留作者链接。