前端工作方式Yeoman（Yo、Grunt、Bower）

当我看到Grunt介绍的时候，我其实是拒绝的。你不能说你有多么强大，但是你这些功能我的编辑器也都能实现啊？根本就没有你说的那么好嘛，后来我试着安装使用了一下，至少我觉得真的很好用。这里简单记录下如何安装和使用。

Yeomen工作方式包含3个工具：Yo、Grunt、Bower。

Yo是一个“脚手架”应用，简单说就是能够自动创建一些工程目录和配置文件。使用Yo工具叫做Yeoman工作方式。而Yeoman本身不是一个工具。

Grunt是一个自动化任务工具。它可以自动执行如代码检查、测试、压缩等任务。值得一提的是他能自动编译SASS文件，并且可以自动刷新网页。

Bower是一个包管理工具，它可以自动下载、更新所有依赖的库文件，比如Jquery。

安装

首先要保证已经安装了node.js和npm，如果npm版本大于1.2.10，只需要执行下面一条命令就能安装上这3个工具：

npm install -g yo

-g表示全局安装；确保node.js大于等于0.8，否则无法安装0.4版本的grunt,0.4和0.3差异比较大。

使用Yo

Yo命令必须配合各种generator来使用，先安装一个基本web应用generator。

npm install -g generator-webapp

它包含了HTML5 Boilerplate, jQuery, Modernizr, and Bootstrap。当然，如果你说我根本不用bootstrap或者Modernizr怎么办，Yo在创建时会让你选择是否使用这些依赖库的。

创建工程

mkdir my-yo-project
cd my-yo-project    
yo webapp

使用Bower

# 创建工程
yo webapp

# 搜索库
bower search jquery-pjax

# 安装，保存到bower.json
bower install jquery-pjax --save

# 如果使用了RequireJS...
# 注意webapp generator本身并不包含RequireJS

grunt bower
> 把Bower依赖库写入到RequireJS配置中


# 如果不使用 RequireJS...
grunt bowerInstall
> 把依赖库写入到index.html中

使用Grunt

# 预览文件（实时刷新）
grunt serve

# 运行单元测试.
grunt test

# 编译可用于发布的版本（包含build任务）。
grunt

#不测试编译（grunt默认包含了此任务）。
grunt build

#清理.tmp文件夹
grunt clean
#编译sass文件
grunt compass
#启动本地服务器，监视并且实时刷新变动
grunt connect
#打开服务器实例，如localhost:9000
grunt open

备注

• Grunt的任务配置保存在Gruntfile.js中。
• 查看Grunt的版本号用 grunt --version 命令
• Grunt的任务以插件的形式存在。
• Grunt从0.4开始，grunt-cli是全局安装的，grunt是安装到工程目录中的。grunt-cli调用工程中的grunt，并读取gruntfile中的配置运行“任务”。