本節書摘來自華章出版社《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目錄下。其他目錄和檔案的用途這裡隻做簡單介紹，後面的文章中涉及時再展開講解。