ECMAScript前端工程构建工具之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
    轻松地运行单元测试。当你创造新的应用程序的时光,它还会吗你活动创建测试内容之骨子。

二、安装

ECMAScript 1

具体步骤:

  1. 以F盘中新打个文件夹,然后运行dos命令,执行npm
    install -g yo
  2. 执行npm -install -g generator
    -webapp

ECMAScript 2

ECMAScript 3

三、使用

1、创建工程

安装好 Yeoman
后,就好透过命令来新建工程,首先新建一个工程目录,比如 demo,首先创建
demo 目录然后在该下键入命令:

yo webapp

这时候 Yeoman
会询问有部署安装(这里布满选了
Yes),之后就是开始活动创建工程。

ECMAScript 4

工程创建了后就可以看到 demo
目录下一度成形了无数目录和文件,这时出所要的条件就添建筑好了,可以起来编码了。

ECMAScript 5

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

服务启动后会活动打开浏览器访问http://localhost:9000/(端口号可以以
gruntfile.js
中配置),然后工程服务会监听工程目录下之预编译文件,一旦出改变就是活动编译并刷新浏览器。比如我们修改工程下之
main.scss 文件,工程服务就是会见开运作:

ECMAScript 6

3、运行测试框架

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

ECMAScript 7

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

迄今 Yeoman
的布置就完了了。接下来就是打定义一模拟工程模板。