Grunt前端打包工具实例

曾经的项目中接到过使用Grunt前端打包工具实现对js、css压缩混淆，对新增或者修改的js、css加版本号，并在引入了js、css的jsp中修改版本号的任务。时间比较久远，现在的Vue项目都是使用nodejs进行打包。毕竟当时废了一番功夫，记录一下。

首先列出使用的包有哪些：

{
  "devDependencies": {
    "grunt": "^0.4.1",
    "grunt-contrib-clean": "^1.0.0",
    "grunt-contrib-copy": "^1.0.0",
    "grunt-contrib-cssmin": "^1.0.2",
    "grunt-contrib-nodeunit": "^1.0.0",
    "grunt-contrib-uglify": "^2.0.0",
    "grunt-debug": "0.0.3",
    "grunt-diff": "^0.1.5",
    "grunt-filerev": "^2.3.1",
    "grunt-text-replace": "^0.4.0",
    "grunt-usemin": "^3.1.1"
  },
  "dependencies": {
    "grunt-changes": "^0.1.2",
    "grunt-clean": "^0.4.0"
  }
}

然后看一下使用这些包的顺序和步骤：

grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.loadNpmTasks('grunt-contrib-clean');
grunt.loadNpmTasks('grunt-filerev');
grunt.loadNpmTasks('grunt-contrib-copy');
grunt.loadNpmTasks('grunt-usemin');
grunt.loadNpmTasks('grunt-text-replace');
grunt.loadNpmTasks('grunt-changes');
grunt.loadNpmTasks('grunt-diff');
// 默认被执行的任务列表。
grunt.registerTask('default', ['clean:upload_release','useminPrepare:release','uglify:release',
'cssmin:release','copy:release','replace:release','filerev:release','usemin','changes:release',
'diff:release']);

1、使用grunt-contrib-clean来清空目标输出文件夹。

2、使用grunt-usemin的useminPrepare模块对输出文件夹的jsp文件进行扫描监控。

3、使用grunt-contrib-uglify压缩混淆js。

4、使用grunt-contrib-cssmin压缩css。

5、使用grunt-contrib-copy把处理过的js、css复制到目标输出文件夹。

6、使用grunt-text-replace把jsp中的指定字符替换成其他字符。

7、使用grunt-filerev来获取css和js的hash值，来知道哪些文件有改变。

8、使用grunt-usemin替换jsp中引入的js、css版本。

9、使用grunt-changes把改动过的jsp输出的目标文件夹。

10、使用grunt-diff把改动的jsp的hash更新到hash.json文件中，以便下一次打包时的比较。

整个过程就是这样的，下面看看具体每个包是怎么使用的。

第一步clean：

clean: {
  release: {
    src: ["dist/release/*"]
  }
}

就是清空dist/release下的所有文件。

第二步useminPrepare：

  useminPrepare: {
      release: 'dist/release/WebContent/website/**/*.jsp'
  },

告诉usemin需要监控的文件，这里是dist/release/WebContent/website下所有jsp后缀的文件。

第三步uglify：

  uglify : {
      release : {
          options : {
              mangle : true, //混淆变量名
              preserveComments : 'some' //不删除注释，还可以为 false（删除全部注释），some（保留@preserve @license @cc_on等注释）
          },
          files : [{
              expand : true,
              cwd : 'WebContent/website/js', //js目录下
              src : ['**/*.js','!jslib/**/*.js'], //所有js文件
              dest : 'dist/release/WebContent/website/js' //输出到此目录下
          }]
      }
  }

注释写的很清楚，就不细说了。功能就是对js进行混淆压缩。

第四步cssmin：

    cssmin : {
      //文件头部输出信息
      options: {
          banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd HH:MM:ss") %> */\n',
          //美化代码
          beautify: {
              //中文ascii化，非常有用！防止中文乱码的神配置
              ascii_only: true
          }
      },
      release : {
          files : [{
                  expand: true,
                  //相对路径
                  cwd: 'WebContent/website/css/',//css目录下
                  src: '*.css',//所有css后缀文件
                  dest: 'dist/release/WebContent/website/css/'//目标输出目录
          }]
      }
  },

对css进行压缩。

第五步copy：

copy: {
  release: {
    files: [
      {src: ['WebContent/**/*','!node_modules/**','!dist/**','!*.bat','!*.json','!**/*.js',
'!**/*.css'], dest: 'dist/release/', filter: 'isFile'},
      {src: ['WebContent/website/js/jslib/**/*'], dest: 'dist/release/', filter: 'isFile'}
    ]
  }
},

这里是把src里的文件转移到dest目标文件下，路径加！感叹号代表忽略。

第六步replace：

  replace: {
    release: {
      src: ['dist/release/WebContent/website/**/*.jsp'],             // 源文件路径
      overwrite:true,             // 覆盖
      replacements: [{
        from: '${base}/website',                   // 被替换字符串
        to: ''                              //替换成的字符串
      }]
    }
  },

把jsp文件中的‘${base}/website’替换成空字符串，项目需要。

第七步filerev：

  filerev: {
    release:{
      src:['dist/release/WebContent/website/js/**/*.js','dist/release/WebContent/website/css/*.css'],
    }
  },

获取js和css的hash值。

第八步usemin：

  usemin: {
    options: {
      assetsDirs: [
        'dist/release/WebContent/website'
      ],
    },
    html: ['dist/release/WebContent/website/**/*.jsp']
  },

根据hash值来更新jsp中引入的css、js版本

第九步changes：

  changes: {
    release: {
      options: {
          hashmap: '.hash'
        },
        files: [{
          expand: true,
          cwd: 'dist/release/WebContent/website',
          src: ['**/*.jsp'],
          dest: 'upload/release/WebContent/website'
        }]
    }
  },

把所有改动的jsp放到upload文件夹下。

第十步diff：

  diff : {
    release : {
      src   : [ 'dist/release/WebContent/**/*.jsp' ],
      tasks : [  ],
    }
  },

更新所有jsp的hash值。

要说明的是，这里有三个文件夹，WebContent、dist和upload，WebContent就是需要打包的文件夹，dist算是中间比对文件夹，upload是最后要上传的目标文件夹。dist的作用就是留着上个版本的upload，以便这次打包时来进行比对。

由于npm install下载的包不能完全满足需求，还对源码进行了一些修改，这里就不赘述了，需要的同学可以留下邮箱，看到后会发。