前端工程构建工具——Yeoman

1、Yeoman 简介

一般在开发新项目时咱们都须要配置工程环境，开发目录，须要下载一些库、框架文件（如 jQuery、Backbone 等），配置编译环境（Less、Sass、Coffeescript等），甚至还要配置单元测试框架，过程很是繁琐，还没开始编码时间就耗了大半天。为了解决这个问题 Paul Irish、Addy Osmani、Sindre Sorhus、Mickael Daniel、Eric Bidelman 和 Yeoman 社区共同开发的一个项目——Yeoman。

 

Yeoman 是由三个工具的组成：YO、GRUNT、BOWER

YO：Yeoman核心工具，项目工程依赖目录和文件生成工具，项目生产环境和编译环境生成工具。

GRUNT：前端构建工具，jQuery就是使用这个工具打包的。

BOWER：Web 开发的包管理器，概念上相似 npm，npm 专一于 NodeJs 模块，而 bower 专一于 CSS、JavaScript、图像等前端相关内容的管理。

Yeoman 特性：

• 快速建立骨架应用程序——使用可自定义的模板（例如：HTML五、Boilerplate、Twitter Bootstrap等）、AMD（经过RequireJS）以及其余工具轻松地建立新项目的骨架。
• 自动编译 CoffeeScrip 和 Compass——在作出变动的时候，Yeoman 的 LiveReload 监视进程会自动编译源文件，并刷新浏览器，而不须要你手动执行。
• 自动完善你的脚本——全部脚本都会自动针对 JSHint 运行，从而确保它们遵循语言的最佳实践。
• 内建的预览服务器——你不须要启动本身的 HTTP 服务器。内建的服务器用一条命令就能够启动。
• 很是棒的图像优化——使用 OptPNG 和 JPEGTran 对全部图像作了优化。
• 生成 AppCache 清单——Yeoman 会为你生成应用程序缓存的清单，你只须要构建项目就好。
• “杀手级”的构建过程——你所作的工做不只被精简到最少，让你更加专一，为你节省大量工做。
• 集成的包管理——Yeoman 让你能够经过命令行轻松地查找新的包，安装并保持更新，而不须要你打开浏览器。
• 对ES6模块语法的支持——你能够使用最新的 ECMAScript 6 模块语法来编写模块。这仍是一种实验性的特性，它会被转换成 eS5，从而你能够在全部流行的浏览器中使用编写的代码。
• PhantomJS单元测试——你能够经过 PhantomJS 轻松地运行单元测试。当你建立新的应用程序的时候，它还会为你自动建立测试内容的骨架。

2、安装

这里以 OSX 上的安装为例，先来看下 Yeoman 的安装环境要求：

• NodeJS >= 0.8.x
• Ruby >= 1.8.7
• Compass >= 0.12.1
• optipng
• jpegtran
• PhantomJS >= 1.6

在 OSX 上 Ruby 是内置的，因此只须要手动配置下其它服务：

• NodeJS 安装请直接去官网下载 .pkg 安装包进行安装（Homebrew 安装的 NodeJS 会有问题，没法运行 Yeoman 命令）
• Compass 能够使用 Ruby 自带的包管理工具安装：
    $gem install compass
• 其他的 optipng、jpegtran、PhantomJS 能够经过 Homebrew 安装，若是已经安装了 Xcode 那么 Xcode CLI Tools 就已经内置。

开始安装 Yeoman：

npm install -g yo grunt-cli bower

遇到权限问题请加sudo

安装完毕后，会看到如下提示：

 

3、使用

一、建立工程

安装好 Yeoman 后，就能够经过命令来新建工程，首先新建一个工程目录，好比 demo，首先建立 demo 目录而后在该下键入命令：

yo webapp

这时 Yeoman 会询问一些配置设置（这里所有选择了 Yes），以后就开始自动建立工程。

 

工程建立完毕后就能够看到 demo 目录下已经生成了许多目录及文件，这时开发所需的环境就搭建好了，能够开始编码了。

 

webapp 实际上是 Yeoman 内置的工程模板，它整合了 html5 Boilerplate、jquery、Modernizr、Bootstrap、RequireJS 等框架或库文件，使咱们建立完后就能直接使用。除了generator-webapp 还有一个 generator-mocha、generator-backbone、generator-angular等工程模板，能够经过npm search yeoman-generator命令查找，而后使用npm install [name]来安装。

若是工程中须要其它类库，也能够使用命令方便的添加，例如添加 underscore：

bower install underscore

二、启动工程服务

Yeoman 内置 Node 服务。启动命令：

 grunt server

服务启动后会自动打开浏览器访问http://localhost:9000/（端口号能够在 gruntfile.js 中配置），而后工程服务会监听工程目录下的预编译文件，一旦发生改变就自动编译并刷新浏览器。好比咱们修改工程下的 main.scss 文件，工程服务就会开始运做：

 

三、运行测试框架

Yeoman 内置 mocha 测试框架，在 PhantomJS 环境下进行测试，测试命令：

grunt test

 

运行完毕后能够在工程里的 test 目录找到测试报告。

至此 Yeoman 的部署就完成了。接下来就是自定义一套工程模板。

参考文章

http://yeoman.io/index.html

http://www.36ria.com/6144