前端工程营造工具——Yeoman

一、Yeoman 简介

一般在开发新项目时大家都需求配备工程环境,开发目录,必要下载一些库、框架文件(如
jQuery、Backbone
等),配置编译环境(Less、Sass、Coffeescript等),甚至还要配置单元测试框架,进程至极麻烦,还没起来编码时间就耗了大多天。为了解决那么些标题Paul Irish、Addy 奥斯曼i、Sindre Sorhus、Mickael 丹尼尔勒、埃里克 Bidelman 和
Yeoman 社区共同开发的1个类型——Yeoman。

 

Yeoman 是由多少个工具的结缘:YO、GRUNT、BOWE兰德酷路泽

YO:Yeoman主旨工具,项目工程看重目录和文书生成工具,项不熟悉产环境和编译环境变迁工具。

GRUNT:前端营造工具,jQuery就是应用那么些工具打包的。

BOWE陆风X8:Web 开发的包管理器,概念上看似 npm,npm 专注于
NodeJs 模块,而 bower 专注于
CSS、JavaScript、图像等前端相关内容的保管。

Yeoman 特性:

  • 很快成立骨架应用程序——使用可自定义的沙盘(例如:HTML伍,Boilerplate、TwitterBootstrap等)、英特尔(通过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

安装完成后,会师到以下提醒:

 

三、使用

一,创立工程

设置好 Yeoman
后,就足以由此命令来新建工程,首先新建二个工程目录,比如 demo,首先创设demo 目录然后在该下键入命令:

yo webapp

那会儿 Yeoman 会询问一些安排安装(那里整个增选了
Yes),之后就早先活动成立工程。

 

工程创造已毕后就可以看来 demo
目录下一度成形了成百上千目录及文件,那时开发所需的环境就搭建好了,可以起来编码了。

 

webapp 其实是 Yeoman 内置的工程模板,它构成了 html5
Boilerplate、jquery、Modernizr、Bootstrap、RequireJS
等框架或库文件,使我们创造完后就能一贯运用。除了generator-webapp
还有2个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