前端构建工具 Grunt 入门

之前也介绍过前端构建工具 Ant 和 Yeoman，其中 Yeoman 工具就包含了 Grunt 所以就不多说。那么与 Ant 相比 Grunt 有这么几个优点：

1. Javascript 语法，相比 Ant 的 XML 写起来更简洁更顺手；
2. 任务模块资源丰富，如代码合并、压缩、检测、JSDoc、单元测试等你能想到的都可以找到；
3. 文档丰富，从入门使用，到高级定制，都有相应的使用说明；
4. 上手容易，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 的基本配置和使用就介绍完了，后面还会整理介绍一些进阶的使用技巧。