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

开始

发音：[ɡrʌnt]

网站：http://gruntjs.com/

Github：https://github.com/gruntjs

Wiki: https://github.com/gruntjs/grunt/wiki/Getting-started

使用：jQuery, bootstrap, yui, pure …

任务

• JSHint 检测代码质量

• Concat 合并

• Copy 复制

• Minify 压缩

• Qunit 单元测试

• Source map 调试

准备

• Nodejs

• NPM

安装

• the CLI

• grunt-init

• grunt-plugins

• templates

安装全局命令

> npm install –g grunt-cli

作用：执行Grunt任务

将grunt命令添加到Path路径，在任何目录都可运行。

安装 grunt-init

> npm install –g grunt-init

作用：通过使用模板使项目创建实现自动化

安装插件

> 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

安装模板

模板会依赖当前环境或使用一些提问来建立整个项目的目录结构

可以使用现有的模板或自定义模板

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

准备一个新项目

在项目根目录下创建两个文件

• Gruntfile Gruntfile.js 或者 Gruntfile.coffee

• Package.json

Gruntfile

> grunt-init gruntfile

•配置或定义任务

•加载Grunt插件

Gruntfile结构

Gruntfile一般包括以下部分：

• 外层包装函数

module.exports = function(grunt) {};

• 项目和任务配置

grunt.initConfig(/* config */)

• 加载插件和任务

grunt.loadNpmTasks(/* plugins */)

• 自定义任务

grunt.registerTask(/* default tasks */)

package.json

> npm init

•存放项目信息，作为NPM模块发布

•被Gruntfile依赖，读取项目有关配置和信息

使用Grunt

•切换至项目根目录

> cd

•安装依赖

> npm install

•运行Grunt

> grunt

</thanks>