yeoman入門

本文參考yeoman官方[url]http://yeoman.io/codelab/meet-yeoman.html[/url]

首先yeoman是一個內建了grunt bower gulp的前段建構工作流工具，可以快速生成建構WebApp 甚至是AngularJS的App。

第一步，首先是安裝

在寫這篇文章的時候，最新版本的yeoman版本是1.4.7，後續更新可能會和描述的步驟不同，包括我在學習安裝的時候，和網上很多文章也有出入，是以幹脆就看官方穩當了。

前提條件需要安裝的環境

Node.js v0.10.x+

npm (which comes bundled with Node) v2.1.0+

git

確定以上三個環境的安裝

node --version && npm --version

npm install --global [email protected]

git --version

都有了則可以繼續向下安裝bower（管理前端依賴庫的工具） grunt-cli（建構工具） 和gulp（類似grunt的建構工具，号稱可以抛棄grunt）

npm install --global yo bower grunt-cli gulp

在全局分别安裝以上

確定他們的安裝成功

yo --version && bower --version && grunt --version

這裡需要注意的一點就是，可能之前有以上環境的童鞋，如果版本過舊可能導緻版本不支援，是以需要根據當時的要求安裝限制最低環境以上的環境。

第二步

我們要使用yo的時候，首先會用它來幫我們建立和生成代碼包，全自動化的工作流，是以我們不光需要安裝以上的内容，還需要安裝一些yo的功能

npm install --global generator-angular

（如果使用gulp的話，則是npm install -g generator-gulp-angular）

安裝angular項目的生成器

npm install -g generator-webapp

（如果使用gulp的話，則是npm install -g generator-gulp-webapp）

安裝webapp項目生成器

當然還可以使用yo指令，打開yo的使用菜單，然後選擇Install a generator

[img]http://yeoman.io/static/image_4.4628144919.png[/img]

第三部

開始建立項目，首先建立檔案夾

mkdir yoTest && cd yoTest

然後建立angular項目

yo angular

（如果使用gulp的話，則是yo gulp-angular）

就會在該檔案夾下生成項目相關的檔案，在建立開始會讓使用者選擇，是否使用Sass、Bootstrap等，通過空格進行選擇或取消，然後回車

（當然，也可以使用yo webapp（yo gulp-webapp）來建立普通的web應用）

第四步

目錄結建構立完後，就可以運作Simple了

grunt serve（也可以用gulp）

運作後，浏覽器會自動打開頁面，就可以檢視頁面内容和編寫修改了。

服務在指令終端内啟動監聽，通過CTRL + C來終止服務

第五步

開發項目過程中，我們會随着項目擴大用到新的依賴

通過bower search angular-ui-sortable

來查找依賴庫

通過bower install --save angular-ui-sortable

來進行安裝

安裝後在檔案夾内可以看到自動下載下傳的依賴包，并且這部分依賴包在下次使用grunt的時候，會自動加到index.html裡面的引用裡，友善許多，不過，如果是angular的子產品依賴，還是需要自己在代碼中去添加。

（另外此處需要注明一點，在bower install之後，如果有沒有加入到index.html的情況，有可能是安裝的名稱或者選擇的庫不對，比如我遇到的highlightjs，直接安裝git://github.com/isagalaev/highlight.js.git下的，這裡面并沒有bower檔案，是以就是不支援bower，而且版本也比較老，後來發現，highlightjs git://github.com/components/highlightjs.git這個版才是，并且始終為最新版本）

第六步

釋出項目檔案

grunt serve:dist

編譯壓縮合并，并運作

以上就是yeoman的入門内容了