接著上篇的《 利用Node.js搭建前端自動化平臺 》我們開始搭建自己的前端工作流吧！
要啟動一個項(xiàng)目，最先要做什么？當(dāng)然是搭建一個目錄結(jié)構(gòu)，新建一個帶項(xiàng)目名字的文件夾，再新建一個app文件夾，里面要有common，css，img ... 對了，還要有test文件夾寫單元測試，嗯 ~ 大概長這樣子吧

ProjectName/
├── app/  "app = Application    (應(yīng)用)"
│    ├── src/    "src = source  (源代碼)"
│    │    ├── common/
│    │    │    ├── app.js
│    │    │    ├── directives.js  "指令"
│    │    │    ├── filters.js
│    │    │    ├── services.js
│    │    │    └── controllers.js
│    │    ├── css/
│    │    ├── img/
│    │    ├── js/
│    │    ├── lib/  "lib框架引用"
│    │    └── module/   "路由"
│    │          ├── header/
│    │          └── footer/
│    │                ├── js/
│    │                └── view/
│    ├── dist/   "dist = distribution   (發(fā)布版本）"
│    │    ├── css/
│    │    ├── js/
│    │    └── html/
│    └── index.html
│                
├── test/
│    ├── unit/   "單元測試用例"
│    ├── e2e/   "e2e = end to end   (端口測試用例）"
│    └── karma.conf.js  "karma測試的配置文件"
│
├── node_modules/   "node插件包"
│
└── package.json        "node配置文件"

等等！NO！NO！ 我們說好的自動化呢？這樣子太low了！

• 雖然你可以用你的IDE實(shí)現(xiàn)模板項(xiàng)目，但對于一個新手怎么確定自己的目錄結(jié)構(gòu)是合理高效的呢？
• 在團(tuán)隊(duì)協(xié)作中，（幻想一下）身為架構(gòu)師的你怎么保證團(tuán)隊(duì)立項(xiàng)是合乎規(guī)范的呢？
• 那些配置文件呢，也要一個個建立嗎？

沒錯為了解決這么low的行為，這時候 YEOMAN 出現(xiàn)了！

THE WEB'S SCAFFOLDING TOOL FOR MODERN WEBAPPS

“ 一個現(xiàn)代webapp的腳手架搭建工具 ”

我在網(wǎng)上看了幾篇YEOMAN的教學(xué)博客，還是覺得混亂，沒辦法只能硬下頭皮用我那可憐的英文能力讀官方文檔 QAQ
下面就貢獻(xiàn)下我啃官檔后的經(jīng)驗(yàn)：

安裝 YEOMAN

說到安裝，現(xiàn)在大家都駕輕就熟了吧，打開終端，輸入

$ cnpm install -g yo

一般看博客都能看到這個 只是表達(dá)在終端運(yùn)行的意思，實(shí)際不用輸入；-g 則是表示全局安裝，更多百度 npm教程

這時候你一定會奇怪，不是叫 YEOMAN 嗎？怎么這里寫 yo 。事實(shí)上 yeoman 在 npm 中注冊的名字是 yo 而不是 yeoman，又會有人反駁了，說 yeoman 是谷歌創(chuàng)建的工作流，里面包含 YO，GRUNT，Bower！煞有其事的做了一張圖：
[圖片上傳失敗...(image-c6c1a7-1556162568620)]
但是我們分別打開 Grunt 跟 Bower 的官網(wǎng)，可以發(fā)現(xiàn)Grunt的Development Team是由一群大神組成的GitHub項(xiàng)目，而Bower則是由 Twitter 的兩位工程師開創(chuàng)的。

Bower was created at Twitter by @fat and @maccman, originally released as part of Twitter’s open source effort in 2012. Since its release, numerous individuals have made contributions. Bower is a team effort.

在 YEOMAN 的官網(wǎng)中也只是推薦 Yeoman workflow 這種工作流，所以是谷歌推薦的工作流模式 Yeoman workflow 包含這幾種工具，而不是 Yeoman 包含這幾種工具，Yeoman 只是一個腳手架工具。

YEOMAN 推薦的分別是 scaffolding templates 【YO】，build systems【Gulp or Grunt】，package managers【npm and Bower】

安裝 yo 完成后，我們輸入 yo 運(yùn)行 Yeoman 會有下面的提示出現(xiàn)：

（第一次運(yùn)行時它會問你是否加入用戶改善計劃，選擇 Y 就好了，當(dāng)然也可以 N 不理它。）

C:\Users\Max>yo
? 'Allo! What would you like to do?
  Run a generator
  ──────────────
> Install a generator
  Find some help
  Get me out of here!
  ──────────────

上下方向鍵可以選擇你想要做的操作，其他不用說了，直接解釋下這個 Install a generator 。Generator 詞義為： n. 發(fā)電機(jī)，發(fā)生器；生產(chǎn)者，創(chuàng)始者； 但在這里我更愿意把它稱為模具。

在 Yeoman 的官網(wǎng)上我們進(jìn)入 Discovering generator 可以發(fā)現(xiàn)許多規(guī)范化的模具。記住，帶兩撇胡子的是通過官方驗(yàn)證的模具喲。

當(dāng)我們在 Install a generator 處，按下回車，會提醒下面這句話：

? Search npm for generators:

這時可以選擇你喜歡的模具啦！默認(rèn)，直接回車是選擇 webapp 這個模具。
比如我們現(xiàn)在試著創(chuàng)建 angular 的模板項(xiàng)目

? Search npm for generators:angular

這里最慘的是，他默認(rèn)是用 npm 安裝模板的，假如你的機(jī)子沒有 VPN 恭喜你，慢慢等吧～
（ npm 官方站點(diǎn)并沒有被墻，所以還是可以成功下載的，不成功就多試幾次）
等太久的話，可以終止程序運(yùn)行，這里教大家一個小技巧，連續(xù)按兩次 Ctrl + C 是可以終止程序的，當(dāng)然你關(guān)掉重新打開也行。雖然這樣，它還是非常容易出現(xiàn) ParseError 的報錯，別急，哥再給你一個方法保證成功。還是熟悉的配方，熟悉的味道，我們只要在終端中輸入：

$ cnpm install -g generator-angular

就可以實(shí)現(xiàn)安裝angular模具了～ 嘻嘻，又能使用cnpm了，速度就是快?。?“-g” 是否全局安裝看你自己）

安裝成功后，重新運(yùn)行 yo 是不是發(fā)現(xiàn)多了兩個選項(xiàng)【Angular】、【Update your generators】這就表明模具安裝成功了！列舉下常用的模具：

• $ cnpm install -g generator-webapp
• $ cnpm install -g generator-backbone
• $ cnpm install -g generator-angular
• $ cnpm install -g generator-bootstrap

創(chuàng)建項(xiàng)目

安裝完了，我們實(shí)操一遍吧～
（如果你是接著上面繼續(xù)往下寫的話，可以嘗試下 cls 這個命令清屏，將終端界面變干凈點(diǎn)）
打開終端 cmd （window下），輸入 cd 命令：

$ cd Desktop

cd 進(jìn)入文件夾命令，這里我們進(jìn)入桌面

$ mkdir yeoman-demo

mkdir 新建文件夾命令，這里我們新建一個叫 yeoman-demo 的文件夾，這時候你可以在桌面發(fā)現(xiàn)這個文件夾，或者輸入 dir 命令查看桌面的文件列表，也是可以發(fā)現(xiàn)這個文件夾的。

cd進(jìn)入 yeoman-demo 文件夾后，運(yùn)行 yo 命令，選擇Angular，回車它會詢問項(xiàng)目需要包含的框架

• 【Gulp or Grunt】后面文章中會詳細(xì)講解
• 【Sass】是類似于 Less 的 "CSS預(yù)處理器"，先給自己埋個坑《CSS預(yù)處理器 - Sass》
• 【Bootstrap】大家都很熟悉了，是一個由Twitter推出的一個用于前端開發(fā)的開源工具包

我們只是做個實(shí)例，都選 y 就好了（【Sass】是需要【Ruby】的，可以選擇N），空格選擇angular包含的組件，回車確定。這時候它可能會報錯：

You don’t seem to have a generator with the name “karma:app” installed.

表明你的計算機(jī)沒有含有 karma 這個組件，karma 一個用于自動化單元測試的npm組件。

Karma是Testacular的新名字，在2012年google開源了Testacular，2013年Testacular改名為Karma。Karma是一個讓人感到非常神秘的名字，表示佛教中的緣分，因果報應(yīng)，比Cassandra這種名字更讓人猜不透！
Karma是一個基于Node.js的JavaScript測試執(zhí)行過程管理工具（Test Runner）。該工具可用于測試所有主流Web瀏覽器，也可集成到CI（Continuous integration）工具，也可和其他代碼編輯器一起使用。這個測試工具的一個強(qiáng)大特性就是，它可以監(jiān)控(Watch)文件的變化，然后自行執(zhí)行，通過console.log顯示測試結(jié)果。
—— 來自博客《Karma和Jasmine自動化單元測試》

我們可以通過命令 $ cnpm install -g karma 與 $ cnpm install -g generator-karma 進(jìn)行安裝（假如等待過久的話，終止程序，嘗試下運(yùn)行命令 $ npm config set registry https://registry.npm.taobao.org 將npm的下載地址轉(zhuǎn)變?yōu)閏npm，下次遇到等待也可以這樣解決，秒裝的喲～），安裝完成后繼續(xù)執(zhí)行 yo Angular 命令，等待安裝完成后，就會彈出配置 package.json 選項(xiàng)（畫重點(diǎn)，package.json 一個描述該項(xiàng)目信息的文件，每個項(xiàng)目中必要文件，后面Gulp會細(xì)講），然后看看它的配置選項(xiàng)自行選擇。

補(bǔ)充下代碼界常識 ( Ynaxdh )

Here the complete list of answers:
Y: yes (Default)
n: no
a: yes to this question and all others (or always yes).
x: abort (exit)
d: show the differences between the old and the new file
h: help, list all options
So if you don't remember this definitions you can always enter h and see the list. Also in the new version, when you enter one of the letters you will see the definition showing behind the question.
The one in uppercase is the default one. If that is your choice, you can just hit enter.
——— By Jesús Carrera

issue

• 假如下載安裝過程中卡頓在這條命令：
  npm WARN deprecated minimatch@0.2.14: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
  你可以終止程序，并執(zhí)行命令：
  cnpm install minimatch@"3.0.2"
• 假如還是等待很久的話，可以終止程序，先安裝【Gulp or Grunt】
  $ cnpm install -g gulp
$ cnpm install -g grunt
• 還可以嘗試下官方入門模具【webapp】，在新項(xiàng)目下運(yùn)行：
  $ cnpm install -g generator-webapp
$ yo webapp

完成安裝

完成后你會看到大概這樣的項(xiàng)目結(jié)構(gòu)：

├─ app/
│  ├─ images/
│  │  ├─ glyphicons-halflings.png
│  │  └─ glyphicons-halflings-white.png
│  ├─ scripts/
│  │  ├─ vendor/
│  │  │  └─ bootstrap.js
│  │  ├─ app.js
│  │  ├─ hello.coffee
│  │  └─ main.js
│  ├─ styles/
│  │  └─ main.css
│  ├─ .htaccess
│  ├─ 404.html
│  ├─ favicon.ico
│  ├─ index.html
│  └─ robots.txt
│
├─ node_modules/
│  ├─ so/
│  ├─ many/
│  └─ packages/
│
├─ test/
│  ├─ spec/
│  │  └─ test.js
│  ├─ .bowerrc
│  ├─ bower.json
│  └─ index.html
│
├─ .bowerrc
├─ .editorconfig
├─ .gitattributes
├─ .gitignore
├─ .jshintrc
├─ bower.json
├─ Gruntfile.js
└─ package.json

有很多東西對不對，不要怕，后面的文章中我們會一個個的擊破它~
好啦，至此我們已經(jīng)學(xué)會了如何利用 yeoman 自動化創(chuàng)建一個項(xiàng)目結(jié)構(gòu)了！

YEOMAN 補(bǔ)充

• 當(dāng)我們在新環(huán)境中，可以按以下命令模式，快速建立環(huán)境：
  $ cnpm install -g yo generator-webapp glup
  generator-something 可以接你需要的模具

• 在項(xiàng)目中，我們也可以用以下命令快速構(gòu)建：
  $ yo webapp

• 當(dāng)你想查看這個模具有什么樣的配置時，可以使用下面命令：
  $ yo webapp --help

• 當(dāng)你想查看，這個模具在GitHub具體說明時，可以使用下面命令：
  $ cnpm home generator-webapp

• 當(dāng) Yeoman 不能正常工作時，可以使用下面命令排除問題：
  $ yo doctor
  還不能解決點(diǎn)擊 support 查詢

• 一個模具可能非常多的功能，這樣就衍生出子模具 (sub-generator) 的出現(xiàn)，如你想使用這個子模具，例angular:controller：
  $ yo angular:controller MyNewController

Generators scaffolding complex frameworks are likely to provide additional generators to scaffold smaller parts of a project. These generators are usually referred to as sub-generators, and are accessed as generator:sub-generator.

• 是否想創(chuàng)建一個屬于自己的 generator 模具
  點(diǎn)擊番外篇《 Node.js 自動化工具 - YEOMAN 之 Creaing a generator 》

• 官推資源
  Resources 查看別人家的文章

• 總結(jié)下官網(wǎng)學(xué)習(xí)到的詞匯

那下篇我們來學(xué)習(xí)《 Node.js 自動化工具 - Bower 》

該篇收錄于文集：Node教程