grunt 简易教程

越来越多的前端开源项目采用grunt来构建或者管理其项目。Grunt是一个自动化的项目构建工具。如果你需要重复的执行像压缩，编译，单元测试，代码检查以及打包发布的任务。那么你可以使用Grunt来处理这些任务，你所需要做的只是配置好Grunt，这样能很大程度的简化你的工作。而且grunt是基于nodejs、采用javascript的语法，学习使用非常的方便。

安装grunt

Grunt和Grunt的插件都是通过Node.js的包管理器npm来安装和管理的。

Grunt 0.4.x要求Node.js的版本>=0.8.0(也就是0.8.0及以上版本的Node.js才能很好的运行Grunt)。

安装Grunt之前，可以在命令行中运行node -v查看你的Node.js版本。

然后进行Grunt CLI的安装，安装很简单在命令行中运行npm install -g grunt-cli。

grunt-cli并不等于安装了grunt任务运行器！Grunt CLI 是grunt运行调用的一个接口。安装Grunt CLI最好安装好了一个grunt版本。
npm install -g grunt。

配置grunt

采用了grunt有两个重要的文件就是package.json和Gruntfile.js(采用CoffeesCript时候是Gruntfile.coffee)。

package.json 主要是配置一些常见的属性，比如项目名称、作者、依赖资源等等。

Gruntfile.js主要配置grunt的任务，比如代码压缩、less编译、复制等等。

一个Gruntfile.js类似如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

module.exports = function (grunt) {
	grunt.initConfig({
		copy:{
			...
		},
		jshint:{
			...
		}
	});
	grunt.loadNpmTasks("grunt-contrib-copy");
	grunt.loadNpmTasks("grunt-contrib-jshint");
	grunt.registerTask("custom",function(target){
		...
	});
	grunt.registerTask("default",["jshint","copy"]);
}

非常简答的结构配置，使用起来也很简单。

在grunt.initConfig里配置，载入插件支持的任务。比如载入了grunt-contrib-copy，你就可以在grunt.initConfig中配置copy任务(copy的具体参数请查看插件首页grunt-contrib-copy)。

要使用什么插件可以根据自己的需要载入。

如果你需要的任务插件满足不了你的项目需求，你还可以自定义task来实现。一般常用的功能都有插件实现的(根据插件来扩展会更加方便)。

如果Gruntfile.js 定义的任务是在是太多，可以考虑使用grunt.loadTasks来帮助分成多个js文件。

常用插件

• grunt-contrib-clean: 清理文件插件。
• grunt-contrib-copy: 复制文件插件。
• grunt-contrib-jshint: javascript代码格式验证插件。
• grunt-contrib-uglify: javascript文件压缩插件。
• grunt-contrib-watch: 实时任务插件，自动检测文件改变，执行相应任务。
• load-grunt-tasks: 载入grunt任务，在你插件比较多的时候非常有用省去多次配置载入插件的麻烦。注：载入规则依赖于package.json中的devDependencies。
• time-grunt: 统计时间插件，在每条任务执行之后统计出花费时间。
• connect-livereload: 自动刷新插件，在开发或者调试前端显现的时候非常有用。可以省去很多Ctrl+S F5的时间。
• grunt-contrib-qunit - Qunit 单元测试（依赖 PhantomJS）。

grunt模板yeoman

yeoman是构建在grunt之上的一个模板工具，它可以省去你配置grunt任务的很多时间。而且有很多不错的模板。是一个值得参考学习的工具。

yeoman可以提供一整套的前端开发配置。
它使用了bower来管理css、javascript、图片等的资源依赖。
使用grunt来管理自动化命令。

参考文档

• grunt主页
• yeoman主页
• bower