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
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轻松地运行单元测试。当你创建新的应用程序的时候,它还会为你自动创建测试内容的骨架