作为JavaScript下最流行的任务管理工具之一 ，Grunt可以方便快速地让很多重复工作自动化，在熟练使用的情况下可以极大地提高工作效率。配合大量官方与第三方（目前有超过6000个）插件，Grunt具备完善的生态系统，这让其功能愈发强大，对于开发人员来说，很有必要对其有所了解。
1.Grunt安装
grunt可以通过npm安装，安装前可以考虑更新npm到最新版本。和大多数工具一样，Grunt也提供了其命令行工具grunt-cli，通过如下命令进行安装。
npm update -g npm
npm install -g grunt-cli
grunt --help #帮助作为JavaScript的命令运行工具，grunt同样使用了nodejs的require()方式。对于grunt任务来说，除了node项目根目录下的package.json文件外，还需要配置Gruntfile.js文件，这是grunt运行所必须的两个基础配置文件。
在项目中运行grunt项目时，还需要通过npm安装项目所需的grunt插件。在grunt的插件中，名称中包含contrib的插件，都是有grunt官方编写并维护的，例如：
npm install grunt --save-dev
npm install grunt-contrib-jshint --save-dev
npm install grunt-contrib-uglify --save-dev2.Gruntfile配置文件
2.1 典型的Gruntfile示例
一个简单的Gruntfile.js配置文件结构大致如下（官方文档示例），
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');
// 默认任务(s).
grunt.registerTask('default', ['uglify']);
};可以看出，Gruntfile实际上是一个标准的JavaScript文件，包装（wrapper）并导出了供grunt运行的函数。歌不忍
2.2 Gruntfile 文件结构
Gruntfile文件通过grunt.initConfig方法来进行配置。一般来说，配置项的名称多是其任务名称，也可以包含必要的配置数据。在前节中，pkg:grunt.file.readJSON('package.json')配置项用来读取npm项目的package.json配置文件。官方文档中的配置文档参考如下。
grunt.initConfig({
concat: {
options: {
// 任务级别的配置参数，可以覆盖项目级别的配置
},
// concat 任务和配置
},
uglify: {
// uglify 任务和配置
},
// 其他非任务性的配置项和数据
my_property: 'whatever',
my_src_files: ['foo/*.js', 'bar/*.js'],
});- 配置项中，
options对象用于配置每个任务的具体参数，如果这些参数和全局配置冲突，会覆盖掉全局配置。在实际使用中options参数非常有用。 - 由于大多数任务都涉及到文件和文件夹操作，grunt配置项中一般通过
src和dest来配置文件路径，配置项支持通配符和数组，也可以通过filter配置项对文件进行过滤。部分通配符说明如下：- *可以匹配/之外的任意数量的字母
- **可以配置包含/在内的任意数量的字符
- ?可以匹配/之外的单一字符
- | 放在匹配模式最前面可以实现反向匹配
- {}以逗号隔开，实现“或”条件匹配
- 前节实例中src/<%=pkg.name%>.js 实现从外部文件（package.json中name项）导入文件的功能
3. 真实项目中的Gruntfile配置文件
3.1 Gruntfile的编写步骤
在配置Gruntfile编写中，首先包括一个包装器（wrapper）来讲整个模块导出为grunt函数。
module.exports = function(grunt) {
};在包装器中，首先要进行任务配置。一般来说，配置项的第一项为pkg，用于读取项目的package.json文件。
grunt.initConfig({
pkg: grunt.file.readJSON('package.json')
});pkg配置项之后，可依次编写各个任务，例如：
concat: {
options: {
// define a string to put between each file in the concatenated output
separator: ';'
},
dist: {
// the files to concatenate
src: ['src/**/*.js'],
// the location of the resulting JS file
dest: 'dist/<%= pkg.name %>.js'
}
}任务编写完成后，需要调用grunt插件来执行各个任务。例如：
grunt.loadNpmTasks('grunt-contrib-concat');最后，注册任务以便grunt执行，最重要的是default任务，这是grunt的默认任务。
//在终端执行grunt test可以执行test任务
grunt.registerTask('test', ['jshint', 'qunit']);
// 在终端执行grunt，执行默认任务
grunt.registerTask('default', ['jshint', 'qunit', 'concat', 'uglify']);3.2 官方文档的Gruntfile模板
按照上述步骤实现的官方文档提供的Gruntfile模板文件如下，该文件执行concat,uglify,qunit,jshint与watch任务。
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
concat: {
options: {
separator: ';'
},
dist: {
src: ['src/**/*.js'],
dest: 'dist/<%= pkg.name %>.js'
}
},
uglify: {
options: {
banner: '/*! <%= pkg.name %> <%= grunt.template.today("dd-mm-yyyy") %> */\n'
},
dist: {
files: {
'dist/<%= pkg.name %>.min.js': ['<%= concat.dist.dest %>']
}
}
},
qunit: {
files: ['test/**/*.html']
},
jshint: {
files: ['Gruntfile.js', 'src/**/*.js', 'test/**/*.js'],
options: {
// options here to override JSHint defaults
globals: {
jQuery: true,
console: true,
module: true,
document: true
}
}
},
watch: {
files: ['<%= jshint.files %>'],
tasks: ['jshint', 'qunit']
}
});
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-qunit');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.registerTask('test', ['jshint', 'qunit']);
grunt.registerTask('default', ['jshint', 'qunit', 'concat', 'uglify']);
};4.创建Grunt任务
4.1 任务别名
grunt任务中包含可选的描述项，在任务很多时可以区分各个不同的任务。任务列表用标准的javascript数组格式列出，如果不指定任务名称，则默认执行default任务。在执行任务时，每个人物可以包含指定的参数，以下示例中，第一行标识了可选的描述项位置，第二行列出了执行的任务清单，第三行执行两个包含参数的任务。本文中所有示例均来自grunt官方文档。
grunt.registerTask(taskName, [description, ] taskList)
grunt.registerTask('default', ['jshint', 'qunit', 'concat', 'uglify']);
grunt.registerTask('dist', ['concat:dist', 'uglify:dist']);4.2 多任务
grunt支持针对多个任务分别配置不同参数并执行，示例如下：
grunt.initConfig({
log: {
foo: [1, 2, 3],
bar: 'hello world',
baz: false
}
});
grunt.registerMultiTask('log', 'Log stuff.', function() {
grunt.log.writeln(this.target + ': ' + this.data);
});4.3 自定义任务
如果需要，也可以自定义不同的任务并执行。以下示例任务中bar依赖foo才能执行。
grunt.registerTask('foo', 'My "foo" task.', function() {
return false;
});
grunt.registerTask('bar', 'My "bar" task.', function() {
// Fail task if "foo" task failed or never ran.
grunt.task.requires('foo');
// This code executes if the "foo" task ran successfully.
grunt.log.writeln('Hello, world.');
});
// Usage:
// grunt foo bar
// doesn't log, because foo failed.
// ***Note: This is an example of space-separated sequential commands,
// (similar to executing two lines of code: `grunt foo` then `grunt bar`)
// grunt bar
// doesn't log, because foo never ran.4.4 异步任务
grunt任务默认同步执行，如果要执行异步任务，可参考如下示例。
grunt.registerTask('asyncme', 'My asynchronous task.', function() {
var done = this.async();
doSomethingAsync(done);
});5. 创建grunt插件的步骤
如果要创建自己的grunt插件，可按官方指导的如下步骤 进行。
- 全局安装
grunt-init,npm install -g grunt-init - 安装gruntplugin模板项目，
git clone git://github.com/gruntjs/grunt-init-gruntplugin.git ~/.grunt-init/gruntplugin，在windows系统中问及路径为%USERPROFILE%\.grunt-init\gruntplugin - 在空目录下运行
grunt-init gruntplugin - 在项目中运行
npm install - 编写插件
- 执行
npm publish以便将插件发布到npm。