一楼喂度娘

作为一个Web开发的新手，创建一个合理的工程结构实在是个令人头疼的事。虽然花了很多功夫学写Gruntfile，面对层出不穷的工具、框架，仍然是力不从心。本着对“懒人改变世界”的无限信仰，我开始再网上寻找一劳永逸的解决方案，终于让我发现了我救星Yeoman(http://yeoman.io/)
Yeoman给自己的定义是“现代WebApp的脚手架”，有了这个“脚手架”，我们这些代码民工们就可以愉快地在Web工地上愉快的爬上爬下，而不用花大量的时间配置框架和工具了。
Yeoman的网站上有一个手把手的教程(http://yeoman.io/codelab.html)，寥寥10步，就可以从零开始，搭建一个集开发，测试，发布于一体的AngularJS前段App开发环境。
鉴于一些吧友阅读洋文不便，我对这10个步骤做个简短的翻译（好吧，楼主很懒，只是总结，不算翻译），开始盖楼。

第一步，配置环境
安装前提：
安装Yeoman之前需要有
1. Node.js v0.10.x+
2. npm v1.4.3+
3. git
可以用命令
node --version && npm --version && git --version
来检查是否已经安装达标。
安装命令：
npm install --global yo bower grunt-cli
如果遇到权限问题，建议不要用sudo (linux/OS X)，因为sudo会给以后带来更多权限问题。可以考虑修改npm的prefix指向一个不需要管理员权限的路径。
除了yo，另外两个工具分别是bower包管理工具(http://bower.io)和grunt脚本执行工具(http://gruntjs.com)，对于不熟悉这两个工具的同学可以去官网学习用法。
检查安装结果：
yo --version && bower --version && grunt --version
如果安装成功，这条命令会打印yo, bower和grunt的版本。

第二步，安装Yeoman工程生成器
/* 我已经完全不想翻译了。。按我的理解写吧 */
对于不同类型的工程，Yeoman需要安装相应的工程生成器。工程生成器是独立于Yeoman项目的，可以单独安装。我们以AngularJS工程为例，安装generator-angular
npm install --global [email protected]
我不知道官方的示例为什么要指定0.9.2版本，我自己的写法是
npm install --global generator-angular
在楼主发帖时间，安装的是0.9.8。

第三步，用生成器生成工程“脚手架”（生成一个AngularJS工程）
创建工程文件夹
假设你用的是Linux/OS X，
mkdir mytodo && cd mytodo
祭出Yeoman
yo angular
然后接下来的就是回答一系列的问题，按照示例，我们不用Sass但使用Bootstrap，和所有默认的AngularJS插件。
回答完所有问题，Yeoman开始刷屏，下载安装各种需要的工具和框架。

第四步，检查Yeoman为你生成的app
打开你的mytodo文件夹，里面就是Yeoman为你配置的所有内容。大致介绍一下每个文件夹
app: 你的Web App文件夹，所有的html/javascript/css都应放在这里
app/script: Javascript文件夹
app/style: css文件夹
app/views: 用来放AngularJS的模板（如果不了解什么是AngularJS模板，请学习AngularJS）
bower_components: bower包管理器下载区，相当于npm的node_modules
test: 单元测试代码

第五步，在浏览器里预览你的app
启动预览服务器
grunt serve
这条命令会启动一个web服务器在localhost:9000，并激活浏览器打开这个页面。grunt会侦测代码变动，在你修改代码时自动通知浏览器刷新页面。

第六步，动手写AngularJS应用
示例里写了个Todo List的AngularJS应用。楼主犯懒，不重复了。这些内容相当于一个AngularJS的入门教程。有兴趣的同学参见
http://yeoman.io/codelab/write-app.html
https://docs.angularjs.org/tutorial

第七步，用Bower安装新的程序包
在Yeoman工程中，可以方便的用bower安装所需的开源程序包。你可以使用
bower list
查看当前工程中已经安装的包。
继续跟着示例来，假设我们现在需要使用angular-ui-sortable和jquery-ui，安装他们只需要
bower install --save angular-ui-sortable jquery-ui
参数"--save"会把依赖关系写进bower.json，熟悉npm的同学对这一点应该不陌生。
接下来的篇幅，官方教程讲解了在自己的工程里怎么用新安装的包。嗯，就像用普通的js那样用，记得他们是被安装再bower_components文件夹里了。不再赘述。

第八步，用Karma和Jasmine写测试代码
“测试是什么？哥一个人写代码，哥的代码永远不会错”，好吧如果你真的这个如此牛(sha)B的程序猿的话，请跳过这部分吧。
Yeoman自动生成的代码是带有测试框架的，命令
grunt test
会执行你所有的测试代码。测试代码放在test/spec/，mock代码放在test/mock/，当然，这些路径你可以再test/karma.conf.js中修改。当你需要引入新的代码包时（例如之前的angular-ui-sortable和jquery-ui），你也需要修改karma.conf.js来引用他们。
对于不了解Karma和Jasmine的同学（其实我也不了解），请参见
http://karma-runner.github.io/0.12/index.html
http://jasmine.github.io/

第九步，准备发布吧！
发步我们的App，我们通常会把所有必要的页面、代码、资源复制到一个独立的文件夹，并minify代码，提高效率。完成这些，你只需要执行
grunt
所有需要发布的内容已经被完整的组织在dist文件夹里了
如果想预览dist文件夹里的工程，执行
grunt serve:dist
如果想清空所有发布内容，执行
grunt clean

好东西！

补充一下，大概两周前pngquant-bin更新到了2.0.0版本，此版本貌似依赖与0.10.3x的nodejs，我ubuntu apt-get安装的0.10.25，yeoman建立的工程npm install失败。去官网下载了最新的0.10.33就好了。