Yeoman

yeoamn由3个应用构成:yo,Grunt,Bower

 

node下安装:

npm install -g yo grunt-cli bower

 

进入自己的工程目录,如: 

cd f:/angularApp

  

1.Yo

首先选择需要加载的包, yo 目前支持 html5 Boilerplate、jquery、Modernizr、Bootstrap、RequireJS等

 


 

yo angular

 

 

Yo会询问你需要是否需要加载bootstrap,输入y/n;

随后,yo会给出关于angular的提示,以及可以选择的组件,空格选择,回车确认.

 

2.Grunt

yeoman内置了Node服务器服务,而且会监听工程目录下的文件的改变,一旦文件发生改变会重新编译文件(sass/less/coffscript)

 

grunt server

 

端口默认是9000,可以在gruntfile中的options.port中修改;

Yeoman默认使用mocha作为测试框架,是在 PhantomJS环境下进行回归测试。

命令:

grunt test

 

可能会报错,因为没有Saas环境,在gruntfile中修改对应的选项

 

3.bower

比如,我想要在工程中引入 underscore.js

bower上场了,使用bower从在线包管理器中拉取underscore代码
bower install underscore  

  

Yeoman特性总结

  • 快速创建骨架应用程序——使用可自定义的模板(例如:HTML5、Boilerplate、Twitter Bootstrap等)、AMD(通过RequireJS)以及其他工具轻松地创建新项目的骨架。
  • 自动编译CoffeeScrip和Compass——在做出变更的时候,Yeoman的LiveReload监视进程会自动编译源文件,并刷新浏览器,而不需要你手动执行。
  • 自动完善你的脚本——所有脚本都会自动针对jshint(软件开发中的静态代码分析工具,用于检查JavaScript源代码是否符合编码规范)运行,从而确保它们遵循语言的最佳实践。
  • 内建的预览服务器——你不需要启动自己的HTTP服务器。内建的服务器用一条命令就可以启动
  • 非常棒的图像优化——Yeoman使用OptPNG和JPEGTran对所有图像做了优化,从而你的用户可以花费更少时间下载资源,有更多时间来使用你的应用程序。
  • 生成AppCache清单——Yeoman会为你生成应用程序缓存的清单,你只需要构建项目就好
  • 杀手级”的构建过程——你所做的工作不仅被精简到最少,让你更加专注,而且Yeoman还会优化所有图像文件和HTML文件、编译你的CoffeeScript和Compass文件、生成应用程序的缓存清单,如果你使用AMD,那么它还会通过r.js来传递这些模块。这会为你节省大量工作
  • 集成的包管理——Yeoman让你可以通过命令行(例如,yeoman搜索查询)轻松地查找新的包,安装并保持更新,而不需要你打开浏览器
  • 对ES6模块语法的支持——你可以使用最新的ECMAScript 6模块语法来编写模块。这还是一种实验性的特性,它会被转换成eS5,从而你可以在所有流行的浏览器中使用编写的代码
  • PhantomJS单元测试——你可以通过PhantomJS轻松地运行单元测试。当你创建新的应用程序的时候,它还会为你自动创建测试内容的骨架

 

 

 

 

 

  

 

 

 

  

Posted on 2013-11-20 15:59  SmileCN  阅读(274)  评论(0编辑  收藏  举报