前面两篇文章[Grunt打造前端自动化工作流(一):Grunt安装][4]和[Grunt打造前端自动化工作流(二):常见插件的功能及参数介绍][5]介绍了具体使用[Grunt][6]之前的基础知识。今天我们就来学习在一个项目中如何使用Grunt以及使用过程需要注意的地方。

我们按照第一篇文章介绍的,新建一个项目文件夹project,文件夹中有两个文件Gruntfile.js和package.json。新建一些文件,最后的目录结构如下:目录中node_modules文件夹是安装grunt产生的,其中已经有了grunt文件夹。js文件夹中有a.js和b.js,两个JS文件夹中都随便写点JS。其余均为空。

![][7]

现在我实际演示如何使用grunt-contrib-uglify插件。

安装uglify插件,注意:一定要在该项目文件夹下安装,每一个项目的Grunt以及插件都是分开的。在命令行下进入project,输入npm install grunt-contrib-uglify –save-dev,安装好了之后,就会看到node_module文件夹下多了一个grunt-contrib-uglify文件夹。而且package.json文件夹里也写好了**devDependencies**:

“devDependencies”:{
“grunt”:”^0.4.5″,
“grunt-contrib-uglify”:”^0.9.1″
}

目前Gruntfile.js里文件内容如下:

module.exports = function(grunt){
grunt.initConfig({

});
}

现在我们加入grunt-contrib-uglify插件的使用代码:

![][8]

ok,在命令行下输入grunt,提示:

![][9]

然后在build/js目录下会多了a.min.js和b.min.js
代码解释:

1. 代码中**line3-line13**部分是uglify插件的配置信息,**line15**部分是加载uglify插件的语句,**line16**部分是注册任务的语句。
1. **line3**的命名uglify是不能变的,是因为这个插件需要一个同名的配置参数。很多插件都是这样的比如:imagemin,cssmin等
1. **line4**的命名build是随意的。不过最好遵循语义化。
1. **line5-line10**是很多插件都有的配置参数(如下)
1. **line15**是用来加载相应插件的。
1. **line16**是用来定义任务的,在上面的例子中,将uglify任务定义为**默认任务**,这时候输入grunt或者grunt default 都是一样的。也可以将任务定义为其他的名字,比如(‘live’,’watch’),这时候要运行watch任务,就要输入grunt live了。

具体的参数含义如下:

* expand: 如果设为true,就表示文件名的占位符(*) 都要扩展成具体的文件名。
* cwd : 需要处理的文件所在的目录
* src : 需要处理的文件,如果为数组形式,数组的每一项就是一个文件名,可以使用通配符
* dest : 处理后的文件名或所在目录
* ext : 处理后的文件名后缀名

一条命令行语句就能完成整个压缩功能,方不方便?这还只是一个最基本的插件,如果结合其他的插件(比如watch),将极大的提升前端开发的效率!!!

可能你注意到了,这个基本例子和[Grunt官网的案例][10]有比较大的不同,这是因为刚开始学的时候,我希望能先把一个最简单的例子剥离出来,好让大家理解Grunt的基本原理,然后再慢慢添加更多参数、语句之类的。

## pkg

官网的案例中有这么一条语句:pgk:grunt.file.readJSON(‘package.JSON’),这条语句的作用是将package.JSON中的JSON数据存入到pkg对象中。这样就可以使用<% %>模板字符串来引用JSON的配置属性了。

## options

options属性分为任务级和目标级,任务级options将影响任务下所有目标,目标级options将只影响具体的目标,目标级options将覆盖任务级options。

![][11]

**line18-line20**是任务级options,**line13-line16**是目标级options.

## 系列文章

[Grunt打造前端自动化工作流(一):Grunt安装][4]

[Grunt打造前端自动化工作流(二):常见插件的功能及参数介绍][5]

[0]: http://div.io/dlogin
[1]: http://div.io/reg
[2]: http://div.io/node/tools
[3]: http://div.io/user/sunyuhui
[4]: http://www.reqianduan.com/2415.html
[5]: http://www.reqianduan.com/2417.html
[6]: http://div.io:/digg/go/44
[7]: http://divio.qiniudn.com/FhpxRO9cPtB5KcFgi1IN-lG-JBA1
[8]: http://divio.qiniudn.com/Fl3PA3ge_iQ1E71fAPvaGP2m-i-Y
[9]: http://divio.qiniudn.com/FtHGnK8NfV0FRFc9dihZeNJqJGDf
[10]: http://www.gruntjs.net/getting-started
[11]: http://divio.qiniudn.com/FkQPUqkCXdI4iVPw_I6eU2Dfc02D