Grunt前端打包工具实例

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。 本文链接：https://blog.csdn.net/shenjuntao520/article/details/102695233

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

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

[code]{
"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"
}
}

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

[code]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：

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

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

第二步useminPrepare：

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

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

第三步uglify：

[code]  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：

[code]    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：

[code]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：

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

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

第七步filerev：

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

获取js和css的hash值。

第八步usemin：

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

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

第九步changes：

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

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

第十步diff：

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

更新所有jsp的hash值。

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

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