本节书摘来自华章出版社《angularjs深度剖析与最佳实践》一书中的第1章，第1.3节，作者 雪狼 破狼 彭洪伟，更多章节内容可以访问云栖社区“华章计算机”公众号查看
接下来，我们要新建一个项目。传统的方式是使用yeoman工具，它是基于node的一个项目生成器引擎，但本书使用的是frontjet方式，所以这里讲两个方式。
这节我们先简单讲讲yeoman。
首先用cnpm install -g yo命令来安装它。
yeoman只是个项目生成引擎，我们还需要安装一个angular的项目模板，可以使用cnpm install -g [email protected]命令。为了让后续步骤和本书的描述保持一致，请完全按照刚才的命令行来安装指定版本，先不要使用新版本。建议等熟悉了此版本后再尝试。
这个生成器还依赖两个全局命令，也需要先行安装：cpnm install -g gulp bower。
接下来我们就可以创建项目了。先建立一个项目目录，比如：mkdir ~/dev && cd ~/dev，mkdir book-forum-yo，然后进入这个目录cd book-forum-yo，再运行命令yo gulp-angular。
这是一个交互式过程，yeoman会提出一系列问题供你选择，请跟随我的选项：
which version of angular do you want?这里是选择angular版本，由于我们需要兼容ie8，所以这里要选1.2.x项。按方向键把光标移到1.2.x项上，回车即可。
which angular抯 modules would you want to have?这里是选择angular的子模块，具体的用途我后面会讲，直接回车即可。
would you need jquery or perhaps zepto?这里是选择jquery的版本，由于我们需要兼容ie8，所以这里要选择 jquery 1.x 版本。
would you like to use a rest resource library?这里选择ngresource，这是angular内置的rest api访问库。另一个选项restangular有点过度设计，不够简洁，所以这里不选择它。
would you like to use a router?这里选择ui router，这是一个第三方库。另一个选项ngroute是内置路由库，ui router用起来比ngroute稍好一些。
which ui framework do you want?这里选择bootstrap，这是twitter开源的一个css库，也有一些javascript组件，它简洁大方，成熟度高，而且可以自由使用在商业项目中，所以作为首选。
how do you want to implements your bootstrap components?这里选择angular ui bootstrap，这是angular-ui组推出的一个第三方angular组件库，本项目中会使用到其中的一些指令。
which css preprocessor do you want?这里选择sass (node)。sass是一种css的增强语言，支持嵌套以及变量、循环等，最终要编译成css，这里选择的是用c语言编写的一个sass编译程序，相对ruby的版本，它功能较少，但是执行速度要快很多，而这种差别在大中型项目中是相当显著的，所以宁可牺牲sass的高级特性，也要选择它。
which javascript preprocessor do you want?这里选择none，也就是普通javascript。考虑到一些读者可能不熟悉其他几种语言，所以为了便于示范，我们选择普通javascript。
which html template engine would you want to have?这里选择jade，事实上这里选择什么都可以，因为为了便于示范，我们在这里不会使用html模板引擎，而是直接使用普通html。
至此，选项的选择已经全部完成，系统会开始安装bower和npm包，前者用来安装前端组件，而后者用来安装开发环境。
不过，由于gfw的阻挡，npm的某些包可能安装失败，因此我们要按ctrl+c组合键阻止这个自动安装过程，而是自己手动安装，请用如下命令：
如果以前用过cnpm和npm，那么可能会出现一些版本不匹配的警告。这些一般不会导致问题，不过如果要去掉这些警告，那么可以用如下命令清除一下缓存，并重新安装：
用yeoman/[email protected]方式创建的项目有一些缺点：
它会在当前目录下放入一个巨大的node_modules目录，但是这些文件只是给gulp工具集使用的。除了浪费很大空间外，它还具有很深的目录结构，容易导致windows系统下的复制、剪切、移动等操作出错。
对中文的支持不够好—它引入script时没有加上utf-8选项。
目录结构设计不理想，这主要表现在它将bower_components放入app目录中，这将干扰“在目录中搜索”等操作。
选项过多，容易让新手困惑，这也阻碍了通过在社区提问来解决问题，因为过多的选项让你很难简短地说清问题。
自动化程度不够。每个程序文件都需要自己手动加入index.html中。
工具部分不容易升级。gulp-angular本身也会升级，但由于老版本已经嵌入项目中，所以要对它进行升级会比较困难，特别是在项目比较多的时候。
有bug，创建了新文件或者删除了文件时不会触发reload。
针对这些缺点，我写了一个开源工具—frontjet（前端喷气式引擎），它是我根据自己的一些项目经历逐步改造而成的。相对于gulp-angular，它主要有以下亮点：
可独立安装、升级。
去掉了很多选项，直接选用经过实践检验的固定技术栈，简化创建过程。
自带一个种子工程，里面包含根据实战经验总结出来的目录结构和开发指南，可用于创建新工程。
自动注入项目中的javascript文件和scss文件，引入javascript文件时会加上charset="utf-8"选项。
对文件进行增删改时都能正常触发reload。
增加编译web font的功能，即把一个svg文件放入icons目录，就会自动编译成font文件（ttf、woff等），以及相应的scss文件。
增加forks功能，可生成针对不同操作系统的文件，开发服务器会根据浏览器所在的操作系统返回相应分支下的文件，这特别适合于手机版调试。
增加mock功能，基于node-restify库，生成一个内置的mock服务器，可在与真实服务端对接之前提供一个模拟服务器。这些mock数据也会被自动用于单元测试。
增加内置的启动为https服务的功能，可用于排查https的特有问题。
增加针对特定url的反向代理、模拟延迟功能。反向代理虽然在gulp-angular中也有实现，不过比较粗糙，需要修改gulp源码才能工作，我将其移到fj.conf.js中。模拟延迟则用于模拟真实环境中的网络延迟，以便设计更好的用户体验。
在linux/mac下增加了系统级错误提示框：当frontjet编译过程中发现语法错误时，会通过系统本身的通知功能显示一个错误提示框，以免被忽略。
frontjet的安装非常简单，使用cnpm install -g fj即可。fj是frontjet的缩写，而且正好是键盘上的两个定位基准键，非常便于输入。安装完之后，即可在任何目录下使用fj命令，常用的命令见表1-3。
1.使用frontjet创建项目
使用frontjet创建项目非常简单：
2.启动开发服务器
现在就可以直接在ide中打开它了。对于intellij/webstorm的最新版本，只要在“file|open”菜单中选择bookforum目录即可。
如果ide支持内嵌命令行窗口功能，如intellij/webstorm的terminal窗口，那么建议打开它，并且在此处执行fj serve命令来启动一个开发服务器，这样就可以在不切换窗口的情况下直接看到javascript或scss的语法错误等问题。如果不支持，请打开一个独立的终端窗口来运行fj serve，并且时常留意一下终端窗口和系统的错误提示框。
3.项目结构
用frontjet创建的项目，具有一个默认的目录结构。
这个结构中有很多readme.md文件，用于解释当前目录的结构以及用途，它们不会出现在编译结果中，并且可以随意删除。也可以自行编辑它，用于在项目组中保持共识。
本项目的结构简介如下：
其中app目录的内部结构都是可以任意调整的，不会影响frontjet的运行。当要对传统项目使用frontjet时，可以将其源文件拷贝到app目录下。其他目录和文件的用途这里只做简单介绍，后面的文章中涉及时再展开讲解。