之前也介绍过前端构建工具 Ant 和 Yeoman，其中 Yeoman 工具就包含了 Grunt 所以就不多说。那么与 Ant 相比 Grunt 有这么几个优点：
- Javascript 语法，相比 Ant 的 XML 写起来更简洁更顺手；
- 任务模块资源丰富，如代码合并、压缩、检测、JSDoc、单元测试等你能想到的都可以找到；
- 文档丰富，从入门使用，到高级定制，都有相应的使用说明；
- 上手容易，Grunt 以及 Grunt 的任务模块都是通过 npm 进行安装和管理，配置简单。
一、安装 Grunt CLI
grunt-cli 类似一个 grunt 的管理器，可以管理本地环境中的多个 grunt
npm install -g grunt-cli
二、配置本地 Grunt
进入目标文件夹执行：
npm install grunt --save-dev
三、安装任务模块
执行 Grunt 任务时会用到各种任务模块，如果本地没有需要手动下载，例如 uglify 模块：
npm install grunt-contrib-uglify -save-dev
执行后 npm 就会将 uglify 下载到在当前目录。
四、建立一个 Grunt 项目
在 Grunt 项目中我们只用管理两个文件： Gruntfile.js 和 package.js（注意大小写）
先来看下 package.js，它是一个配置文件，可以定义一些常量供任务调用，另外当任务模块较多时手动安装就比较麻烦，这时也可以通过配置 package.js 来统一安装，下面是一个 package.js 的例子，你也可以通过 npm install 命令来生成一个 package.js 文件：
{
"name": "grunt-test",
"version": "0.1.0",
"devDependencies": {
"grunt": "~0.4.1",
"grunt-cmd-concat": "~0.2.0",
"grunt-contrib-concat": "~0.3.0",
"grunt-contrib-uglify": "~0.2.2",
"grunt-contrib-clean": "~0.4.0"
}
}
项目所在目录，键入如下命令，npm 会根据 package.js 文件中 devDependencies 的配置，将 grunt 及所需的模块下载到当前目录中。
npm install grunt --save-dev
再来看下 Gruntfile.js ，它可以说是 Grunt 的核心，建立哪些任务，如何执行都是由 Gruntfile.js 来定义：
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json');
});
};
上面是 Gruntfile.js 的通用写法，可以看到它读取了我们之前定义的 package.js，那么在任务里就可以通过pkg.name的形式读取键值。
接下来看一个完整的 uglify 任务例子：
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
uglify: {
build: {
src: 'src/test.js', // 原代码
dest: 'build/test-min.js' // 压缩后的代码
}
}
});
// 引入任务模块
grunt.loadNpmTasks('grunt-contrib-uglify');
// 定义任务
grunt.registerTask('test', ['uglify']);
};
例子很简单也有注释就不多解释，最后键入grunt test就会执行 uglify 的压缩任务。
当然在实际工作中我们会需要执行多个任务，例如合并代码，添加一个任务也非常简单：
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
uglify: {
build: {
src: 'src/test.js',
dest: 'build/test-min.js'
}
},
concat:{ // 合并任务
src: ['src/test.js','scr/test2.js'],
dest: 'build/test-all.js'
}
});
// 引入任务模块
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-concat'); // 添加合并任务所需模块
// 定义任务
grunt.registerTask('test', ['uglify'],['concat']); // 添加合并任务
};
依然是执行grunt test命令就 OK 了。
到这里 Grunt 的基本配置和使用就介绍完了，后面还会整理介绍一些进阶的使用技巧。