grunt入门指南之三 常用插件的使用

先来看个图：

上图是这二年前端炙手可热的项目，这么项目多多少少都需要构建工具支持，grunt是不二之选。

前面二篇教程，大量使用grunt-contrib-uglify插件进行演示，一方面是uglify（压缩js文件）任务，基本上是代码发布前必须执行的，另一方面grunt-contrib-uglify非常典型，堪称grunt的插件的代码。

接下来明河再拎出一些常用的插件，演示grunt的用法。

grunt-contrib-concat

非常常用的grunt插件，用于合并任意文件，用法也非常简单：

[javascript] view plaincopy

1. npm install grunt-contrib-concat --save-dev  

[javascript] view plaincopy

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

（后面的插件演示就不再贴安装插件和注册插件的代码，大同小异。）

任务：合并src下的js文件到build目录，合并后文件名为built.js。

[javascript] view plaincopy

1. grunt.initConfig({  
2.      concat: {  
3.          options: {  
4.              //文件内容的分隔符  
5.              separator:';'  
6.          },  
7.          dist: {  
8.              src: ['src/*.js'],  
9.              dest:'build/built.js'  
10.          }  
11.      }  
12.  });  

向文件追加一些额外信息：

[javascript] view plaincopy

1. grunt.initConfig({  
2.      pkg: grunt.file.readJSON('package.json'),  
3.      concat: {  
4.          options: {  
5.              //文件内容的分隔符  
6.              separator:';',  
7.              stripBanners:true,  
8.              banner:'/*! <%= pkg.name %> - v<%= pkg.version %> - ' +  
9.                          '<%= grunt.template.today("yyyy-mm-dd") %> */'  
10.          },  
11.          dist: {  
12.          }  
13.      }  
14.  });  

自定义进程函数，比如你需要在合并文件前，对文件名进行处理等。

[javascript] view plaincopy

1. grunt.initConfig({  
2.      pkg: grunt.file.readJSON('package.json'),  
3.      concat: {  
4.          options: {  
5.               // Replace all 'use strict' statements in the code with a single one at the top  
6.              banner:"'use strict';\n",  
7.              process:function(src, filepath) {  
8.                      return'// Source: ' + filepath + '\n'+  
9.                               src.replace(/(^|\n)[ \t]*('use strict'|"use strict");?\s*/g,'$1');  
10.              }  
11.          },  
12.          dist: {  
13.          }  
14.      }  
15.  });  

grunt-contrib-copy

顾名思义，用于复制文件或目录的插件。

[javascript] view plaincopy

1. copy: {  
2.   main: {  
3.     files: [  
4.       {src: ['path/*'], dest: 'dest/', filter: 'isFile'},// 复制path目录下的所有文件  
5.       {src: ['path/**'], dest: 'dest/'},// 复制path目录下的所有目录和文件  
6.     ]  
7.   }  
8. }  

有复制，必然有删除。

grunt-contrib-clean

[javascript] view plaincopy

1. clean: {    
2.   build: {    
3.     src: ["path/to/dir/one","path/to/dir/two"]    
4.   }    
5. }    

grunt-contrib-compress

用于压缩文件和目录成为zip包，不是很常用。

[javascript] view plaincopy

1. compress: {  
2.   main: {  
3.     options: {  
4.       archive:'archive.zip'  
5.     },  
6.     files: [  
7.       {src: ['path/*'], dest: 'internal_folder/', filter: 'isFile'}, path下所有的js  
8.       {src: ['path/**'], dest: 'internal_folder2/'},// path下的所有目录和文件  
9.     ]  
10.   }  
11. }  

grunt-contrib-jshint

jshint用于javascript代码检查（并会给出建议），发布js代码前执行jshint任务，可以避免出现一些低级语法问题。

jshint拥有非常丰富的配置，可以自由控制检验的级别。

[javascript] view plaincopy

1. module.exports = function(grunt) {  
2.    
3.     // 构建任务配置  
4.     grunt.initConfig({  
5.         //读取package.json的内容，形成个json数据  
6.         pkg: grunt.file.readJSON('package.json'),  
7.         jshint: {  
8.             options: {  
9.                 //大括号包裹  
10.                 curly:true,  
11.                 //对于简单类型，使用===和!==，而不是==和!=  
12.                 eqeqeq:true,  
13.                 //对于首字母大写的函数（声明的类），强制使用new  
14.                 newcap:true,  
15.                 //禁用arguments.caller和arguments.callee  
16.                 noarg:true,  
17.                 //对于属性使用aaa.bbb而不是aaa['bbb']  
18.                 sub:true,  
19.                 //查找所有未定义变量  
20.                 undef:true,  
21.                 //查找类似与if(a = 0)这样的代码  
22.                 boss:true,  
23.                 //指定运行环境为node.js  
24.                 node:true  
25.             },  
26.             //具体任务配置  
27.             files: {  
28.                 src: ['src/*.js']  
29.             }  
30.         }  
31.     });  
32.    
33.     // 加载指定插件任务  
34.     grunt.loadNpmTasks('grunt-contrib-jshint');  
35.    
36.     // 默认执行的任务  
37.     grunt.registerTask('default', ['jshint']);  
38. };  

配置的含义，明河都写在代码注释中，就不再累述了。

运行grunt命令后：

jshint比较有意思的是还可以结合grunt-contrib-concat插件使用，在合并文件前（后）对js进行检查。

[javascript] view plaincopy

1. grunt.initConfig({  
2.   concat: {  
3.     dist: {  
4.       src: ['src/foo.js','src/bar.js'],  
5.       dest:'dist/output.js'  
6.     }  
7.   },  
8.   jshint: {  
9.     beforeconcat: ['src/foo.js','src/bar.js'],  
10.     afterconcat: ['dist/output.js']  
11.   }  
12. });  

类似的还有个grunt-contrib-csslint插件，用于css代码检查，用法基本一样，只是配置上存在差异，貌似css检查的需求有些鸡肋，就不再演示了。

grunt-contrib-mincss

非常常用的插件，用于css压缩。

用法相对于grunt-contrib-uglify简单很多：

[javascript] view plaincopy

1. mincss: {  
2.   compress: {  
3.     files: {  
4.       "path/to/output.css": ["path/to/input_one.css","path/to/input_two.css"]  
5.     }  
6.   }  
7. }  

grunt-css-combo

我的同事紫英写的css合并的插件，用于css分模块书写时的合并（如果你不使用less、sass、stylus，建议使用这个插件）。

[javascript] view plaincopy

1. grunt.initConfig({  
2.   css_combo: {  
3.     files: {  
4.       'dest/index.combo.css': ['src/index.css'],  
5.     },  
6.   },  
7. })  

文件目录的demo请看github。

src/index.css的代码如下：

[javascript] view plaincopy

1. @import"./mods/mod1.css";  
2. @import"./mods/mod2.css";  
3. #content {}  

通过@import来合并模块css文件。

原文链接：http://www.36ria.com/6226