前者工程构建工具——Yeoman

一、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 特性:

  • 迅速创建骨架应用程序——使用可自定义的模版(例如:HTML5、Boilerplate、Twitter
    Bootstrap等)、AMD(通过RequireJS)以及其他工具轻松地开创新品类的骨子。
  • 电动编译 CoffeeScrip 和
    Compass——在做出改变的时候,Yeoman 的 LiveReload
    监视进程会自动编译源文件,并刷新浏览器,而未需要而手动执行。
  • 活动到而的本子——所有脚论还见面自动对 JSHint
    运行,从而确保她仍语言的特级实践。
  • 内建的预览服务器——你免需启动自己的 HTTP
    服务器。内建的服务器用一条命令就足以启动。
  • 死硬的图像优化——使用 OptPNG 和
    JPEGTran 对持有图像做了优化。
  • 生成 AppCache 清单——Yeoman
    会为汝变应用程序缓存的清单,你仅仅需要构建项目即使好。
  • “杀手级”的构建过程——你所举行的行事不仅让精简至最少,让您越来越专注,为你节省大量行事。
  • 合的包管理——Yeoman
    让你得经过命令行轻松地查找新的承保,安装并保持更新,而休待您打开浏览器。
  • 本着ES6型块语法的支持——你得应用时的 ECMAScript 6
    模块语法来修模块。这尚是平等种实验性的特点,它会于转移成为
    eS5,从而你得以有着流行的浏览器被利用编写的代码。
  • PhantomJS单元测试——你可经过
    PhantomJS
    轻松地运转单元测试。当您创造新的应用程序的下,它还见面否汝活动创建测试内容之架子。

二、安装

这里为 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

安完毕后,会看出以下提示:

 

三、使用

1、创建工程

安好 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

2、启动工程服务

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

 grunt server

劳务启动Bootstrap后会见活动打开浏览器访问http://localhost:9000/(端口号可以在
gruntfile.js
中布局),然后工程服务会监听工程目录下之预编译文件,一旦有转移就自行编译并刷新浏览器。比如我们修改工程下的
main.scss 文件,工程劳务就见面开运转:

 

3、运行测试框架

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

grunt test

 

运行了后可以以工程里之 test 目录找到测试报告。

迄今 Yeoman
的布置就好了。接下来就是起定义一套工程模板。

参照文章

http://yeoman.io/index.html

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

相关文章