Yeoman是一款流行的前端的腳手架工具。

腳手架工具可以用來快速的自動生成專案的必要檔案和基礎檔案結構。Yeoman使用的內建命令為yo，同時它自己也是一個包管理工具和自動化任務工具，它基於特定的模板來初始化專案。

考慮這樣的開發場景：現在我們需要開始一個全新的前端專案，通常需要先處理專案的檔案結構，建立包括img、JavaScript、CSS 等靜態資源的資料夾，如果團隊開發，可能還需要新增 .gitignore忽略檔案以及.editorconfig、.eslintrc、package.json、Gruntfile.js以及README.md等配置檔案。

如果你進行的多個前端專案，它們的技術選型差不多(比如都是：jQuery + grunt + Vue + Bootstrap)，你會發現這些專案的整體檔案結構是相同的。我們在初始化專案的時候，當然可以從0開始搭建，也可以直接把舊專案的結構和相關檔案拷貝過來，這其實都是些重複性沒有技術含量的工作，而Yeoman 的作用就是減少這些重複性的工作，通過呼叫 Yeoman 生態圈中的現成的生成器(generator

關於Yeoman的更多資訊可以參考Yeoman官網和Github託管倉庫。

Yeoman的安裝和使用

用於初始化專案的模板被稱為生成器（generator）, 在開源社群中已經有眾多現成的generator可以供我們使用（可以在生成器列表頁使用關鍵字搜尋）。在開始專案的時候，我們可以先搜尋是否有匹配當前專案技術棧的生成器，如果有的話直接用就好了，如果找不到合適的generator，那麼可以考慮自己來寫一個Yeoman生成器，甚至通過很簡單的方式我們就可以把自己寫的生成器釋出出來造福社群。

環境準備

安裝yeoman之前，你需要先安裝以下環境

• Node.js 6或更高版本
• npm 3或更高版本（通常安裝Node的時候預設安裝）
• Git版本控制工具

點選NodeJS官網選擇對應系統和版本根據提示完成NodeJS的安裝，我們可以通過在終端輸入下面的命令來檢查Node和npm的安裝是否成功。

$ node --version && npm --version

有些 Node 版本可能安裝的是舊版本的 npm，你可以通過以下命令來更新npm

$ npm install -g [email protected]

Git的安裝過程請自行百度(OSX 預設安裝)，您可以通過以下命名來檢查Git

$ git --version

安裝Yeoman

通過下面的命令來安裝Yeoman並檢查是否安裝成功，當前最新版本為2.0.1，-g表示全域性安裝。

$ npm install -g yo
$ yo --version

generator-typeScript初始化專案示例

接下來我們將選擇一個生成器(這裡以typescript為例)來演示初始化專案的操作，Yeoman將會根據對應的生成器替我們建立好package.json和bower.json等檔案，然後自動安裝依賴。

① 新建 mytodo 資料夾，生成器生成的腳手架檔案會放在這個資料夾中。

$ mkdir mytodo && cd mytodo

② 根據專案技術棧需求到官網列表搜尋合適的生成器。
③ 通過npm來安裝指定的generator。

$ npm install -g generator-typescript

④ typescript生成器安裝完成後，使用yo命令來開始。

$ yo typescript

下面給出終端處理的具體細節：

wendingding:Blog wendingding$ mkdir mytodo && cd mytodo
wendingding:mytodo wendingding$ npm install -g generator-typescript
npm WARN deprecated [email protected]2.1.3: this package has been reintegrated into npm and is now out of date with respect to npm
 
> spawn-sync@1.0.15 postinstall /usr/local/lib/node_modules/generator-typescript/node_modules/spawn-sync
> node postinstall
 
> [email protected]1.8.5 postinstall /usr/local/lib/node_modules/generator-typescript/node_modules/yo
> yodoctor
 
Yeoman Doctor
Running sanity checks on your system
 
✔ Global configuration file is valid
✔ NODE_PATH matches the npm root
✔ Node.js version
✔ No .bowerrc file in home directory
✔ No .yo-rc.json file in home directory
✔ npm version
 
Everything looks all right!
+ [email protected]0.3.0
added 608 packages in 138.302s
wendingding:mytodo wendingding$ yo typescript
 
_-----_
| | ╭──────────────────────────╮
|--(o)--| │ Let's make some awesome │
`---------´ │ typescript project! │
( _´U`_ ) ╰──────────────────────────╯
/___A___\ /
| ~ |
__'.___.'__
´ ` |° ´ Y `
 
I will include JSHint and Editorconfig by default.
? First off, how would you like to name this project? wendingdingDemo
? Where should it be compiled to? app/build
? Where should your typescript go? app/src
create package.json
create app/src/index.ts
create app/src/app.ts
create tslint.json
create gulpfile.js
create test/test-greeting.js
create test/test-load.js
create README.md
create .editorconfig
create .jshintrc
 
 
I'm all done. Running npm install && bower install for you to install the required dependencies. If this fails, try running the command yourself.

按上面的步驟在終端中執行對應命令，我們就可以得到一個基於基於typescript模板生成的初始化專案了，下面列出該專案的目錄結構：

wendingding:mytodo wendingding$ tree
.
├── README.md
├── app
│ ├── build
│ └── src
│ ├── app.ts
│ └── index.ts
├── gulpfile.js
├── package.json
├── test
│ ├── test-greeting.js
│ └── test-load.js
└── tslint.json
 
4 directories, 8 files

最後，根據Yeoman終端中的提示通過$ npm install && bower install命令來安裝必要的依賴即可。