Grunt安装及Gruntfile.js介绍
什么是Grunt？
Grunt是基于Node.js的项目构建工具。它可以自动运行你所设定的任务。Grunt拥有数量庞大的插件,几乎任何你所要做的事情都可以用Grunt实现。
Npm/Node.js
Grunt和 Grunt 插件是通过 npm 安装并管理的，而npm是 node.js 的包管理器。所以在安装Grunt之前，请确保当前环境已经安装node.js并且npm已经是最新版本，执行npm update -g npm指令进行升级。点击http://nodejs.org下载node.js。
注:Grunt 0.4.x 必须配合Node.js>= 0.8.0版本使用。
安装Grunt-CLI
继续安装Grunt之前，先将Grunt命令行（CLI）安装到全局环境中。npm install -g grunt-cli
上述命令执行完成后，grunt命令就被加入到你的系统路径中，以后就可以在任何目录下执行此命令了。
注：安装grunt-cli并不等于安装了Grunt。
创建新的Grunt项目
Grunt项目，需要在你的项目中添加两个文件，package.json和Gruntfile。
package.json：此文件被npm用于存储项目的元数据，以便将此项目发布为npm模块。你可以在此文件中列出项目依赖的Grunt和Grunt插件，放置于devDependencies配置段内。npm init命令，可以创建出一个基本的package.json文件。package.json参考http://docs.npmjs.com/files/package.json。
Gruntfile:此文件被命名为Gruntfile.js或Gruntfile.coffee,用来配置或定义任务并加载Grunt插件。下面将会详细介绍Gruntfile。
安装Grunt和Grunt插件
安装Grunt和Grunt插件是通过命令npm install 。
在项目根目录（Gruntfile目录），执行npm install grunt --save-dev命令，安装最新版本的Grunt到项目目录中，并将其添加到package.json的devDependencies内。同样，执行命令npm install grunt-contrib-jshint --save-dev安装JShint模块。
Gruntfile
Gruntfile.js或Gruntfile.coffee文件，是有效的Javascript或者CoffeeScript文件，应当放在你项目的根目录，和package.json在同一目录。
Gruntfile由以下几部分构成：
- wrapper函数
- 项目与任务配置
- 加载Grunt插件和任务
- 自定义任务
Gruntfile文件案例
module.exports = function(grunt) {
//Project configuration.
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
uglify: {
options: {
banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
},
build: {
src: 'src/<%= pkg.name %>.js',
dest: 'build/<%= pkg.name %>.min.js'
}
}
});
// 加载包含 "uglify" 任务的插件。
grunt.loadNpmTasks('grunt-contrib-uglify');
// 默认被执行的任务列表。
grunt.registerTask('default', ['uglify']);
};
wrapper函数
module.exports = function(grunt) {
// Do grunt-related things in here
};
每一份Gruntfile都遵循同样的格式，你所写的Grunt代码必须放在此函数内。
项目和任务配置
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
uglify: {
options: {
banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
},
build: {
src: 'src/<%= pkg.name %>.js',
dest: 'build/<%= pkg.name %>.min.js'
}
}
});
代码中，grunt.file.readJSON('package.json')将存储在package.json文件中的JSON元数据引入到config中。<% %>模板字符串可以引用任意的配置属性，因此可以通过这种方式来指定诸如文件路径和文件列表类型的配置数据，从而减少一些重复的工作。与大多数task一样，grunt-contrib-uglify 插件中的uglify任务要求它的配置被指定在一个同名属性中。示例中，我们指定了一个banner选项(用于在文件顶部生成一个注释)，紧接着是一个单一的名为build的uglify目标，用于将一个js文件压缩为一个目标文件。Grunt插件具体参考http://www.gruntjs.net/plugins。
加载Grunt插件和任务
// 加载能够提供"uglify"任务的插件。
grunt.loadNpmTasks('grunt-contrib-uglify');
只要在package.json文件中被列为devDependencies（依赖）的包，并通过npm install安装之后，都可以在Gruntfile中以简单命令的形式使用。
自定义任务
// Default task(s).
grunt.registerTask('default', ['uglify']);
通过定义default任务，可以让Grunt默认执行一个或多个任务。示例中，执行grunt命令时如果不指定一个任务的话，将会执行uglify任务。这和执行grunt uglify或者grunt default的效果一样。default任务列表数组中可以指定任意数目的任务（可以带参数）。
另：特定于项目的任务不必在Gruntfile中定义。他们可以定义在外部.js文件中，并通过grunt.loadTasks方法加载。