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

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

安装grunt构建工具

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

安装grunt插件

要使用grunt压缩合并js文件,需要的插件是:grunt-contrib-uglifygrunt-contrib-concat

  • grunt-contrib-uglify是负责压缩处理js文件的,背后就是大名鼎鼎的uglifyjs
  • grunt-contrib-concat是负责合并所有的.min.js文件的。

所以,需要的命令行是:

npm install grunt-contrib-uglify grunt-contrib-concat --save

苏南大叔:如何使用 grunt 插件压缩合并 js ?减少页面请求数的秘诀 - grunt_install
如何使用 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 ?减少页面请求数的秘诀 - grunt-folder
如何使用 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-uglifygrunt-contrib-concat。两者使用grunt.loadNpmTasks()定义的。
  • uglify任务(去掉了grunt-contrib-字样),负责把每个单独的js压缩(混淆)成多个.min.js文件。
  • concat任务里面,可以定义多个合并任务。这里就定义了一个分支任务js。在这个分支任务里面,通过src数组,顺序定义了已经压缩好的.min.js文件,最终合并得到了all.min.js文件。

苏南大叔:如何使用 grunt 插件压缩合并 js ?减少页面请求数的秘诀 - grunt-cmd
如何使用 grunt 插件压缩合并 js ?减少页面请求数的秘诀(图3-3)

使用方式

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

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

 【福利】 腾讯云最新爆款活动!1核2G云服务器首年50元!

 【源码】本文代码片段及相关软件,请点此获取更多信息

 【绝密】秘籍文章入口,仅传授于有缘之人   grunt    uglify