Bootstrap前者工程打造工具——Yeoman

一、Yeoman 简介

一般而言在开发新项目时大家都必要配备工程环境,开发目录,需求下载一些库、框架文件(如
jQuery、Backbone
等),配置编译环境(Less、Sass、Coffeescript等),甚至还要配置单元测试框架,进程十分麻烦,还没起来编码时间就耗了大多天。为了化解那一个标题保罗 Irish、Addy Osmani、Sindre Sorhus、Mickael Daniel、埃里克 Bidelman 和
Yeoman 社区共同开发的一个门类——Yeoman。

 

Yeoman 是由五个工具的结缘:YO、GRUNT、BOWER

YO:Yeoman焦点工具,项目工程看重目录和文件生成工具,项目生产条件和编译环境变化工具。

GRUNT:前端营造工具,jQuery就是运用那一个工具打包的。

BOWER:Web 开发的包管理器,概念上接近 npm,npm 专注于
NodeJs 模块,而 bower 专注于
CSS、JavaScript、图像等前端相关内容的田间管理。

Yeoman 特性:

  • 高效创制骨架应用程序——使用可自定义的模版(例如:HTML5、Boilerplate、推特Bootstrap等)、速龙(通过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

劳务启动后会自动打开浏览器访问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

相关文章