Introduction to grunt.js

1. Grunt
基于任务的命令行构建工具

2. 开始
发音：[ɡrʌnt]
网站：http://gruntjs.com/
Github：https://github.com/gruntjs
Wiki: https://github.com/gruntjs/grunt/wiki/Getting-started
使用：jQuery, bootstrap, yui, pure …

3. 任务
• JSHint 检测代码质量
• Concat 合并
• Copy 复制
• Minify 压缩
• Qunit 单元测试
• Source map 调试

4. 准备
• Nodejs
• NPM

5. 安装
• the CLI
• grunt-init
• grunt-plugins
• templates

6. 安装全局命令
> npm install –g grunt-cli
作用：执行Grunt任务
将grunt命令添加到Path路径，在任何目录都可运行。

7. 安装 grunt-init
> npm install –g grunt-init
作用：通过使用模板使项目创建实现自动化

8. 安装插件
> npm install grunt-contrib-jshint --save-dev
> npm install grunt-contrib-qunit --save-dev
> npm install grunt-contrib-concat --save-dev
> npm install grunt-contrib-uglify --save-dev
> npm install grunt-contrib-watch --save-dev

9. 安装模板
模板会依赖当前环境或使用一些提问来建立整个项目的目录结构
可以使用现有的模板或自定义模板
grunt-init-gruntfile, grunt-init-gruntplugin.
使用模板创建Grunt项目
> grunt-init [template]
模板存放在 home 目录的 .grunt-init 文件夹下，可以使用git来安装
> git clone https://github.com/gruntjs/grunt-init-gruntfile.git ~/.grunt-init/gruntfile

10. 准备一个新项目
在项目根目录下创建两个文件
• Gruntfile Gruntfile.js 或者 Gruntfile.coffee
• Package.json

11. Gruntfile
> grunt-init gruntfile
• 配置或定义任务
• 加载Grunt插件

12. Gruntfile 结构
Gruntfile一般包括以下部分：
• 外层包装函数
module.exports = function(grunt) {};
• 项目和任务配置
grunt.initConfig(/* config */)
• 加载插件和任务
grunt.loadNpmTasks(/* plugins */)
• 自定义任务
grunt.registerTask(/* default tasks */)

13. package.json
> npm init
• 存放项目信息，作为NPM模块发布
• 被Gruntfile依赖，读取项目有关配置和信息

14. 使用Grunt
• 切换至项目根目录
> cd
• 安装依赖
> npm install
• 运行Grunt
> grunt

15. </thanks>