這篇文章不是一篇翻譯也不是一篇原創文章，類似于一篇學習筆記，主要是記錄一些關鍵的過程，友善查閱加深了解和記憶。
yeoman 是 google 的團隊和外部貢獻者團隊合作開發的，他的目标是通過 grunt（一個用于開發任務自動化的指令行工具）和 bower（一個html、css、javascript 和圖檔等前端資源的包管理器）的包裝為開發者建立一個易用的工作流。
yeoman 的目的不僅是要為新項目建立工作流，同時還是為了解決前端開發所面臨的諸多嚴重問題，例如零散的依賴關系。
yeoman 主要有三部分組成：<code>yo</code>（腳手架工具）、<code>grunt</code>（建構工具）、<code>bower</code>（包管理器）。這三個工具是分别獨立開發的，但是需要配合使用，來實作我們高效的工作流模式。
下面這幅圖很形象的表明了他們三者之間的協作關系。
yeoman 特性：
<code>快速建立骨架應用程式</code>。使用可自定義的模闆（例如：html5、boilerplate、twitter bootstrap 等）、amd（通過 requirejs）以及其他工具輕松地建立新項目的骨架。
<code>自動編譯 coffeescrip 和 compass</code>。在做出變更的時候，yeoman 的 livereload 監視程序會自動編譯源檔案，并重新整理浏覽器，而不需要你手動執行。
<code>自動完善你的腳本</code>。所有腳本都會自動針對 jshint 運作，進而確定它們遵循語言的最佳實踐。
<code>内建的預覽伺服器</code>。你不需要啟動自己的 http 伺服器。内建的伺服器用一條指令就可以啟動。
<code>非常棒的圖像優化</code>。使用 optpng 和 jpegtran 對所有圖像做了優化。
<code>生成 appcache 清單</code>。yeoman 會為你生成應用程式緩存的清單，你隻需要建構項目就好。
<code>“殺手級”的建構過程</code>。你所做的工作不僅被精簡到最少，讓你更加專注，為你節省大量工作。
<code>內建的包管理</code>。yeoman 讓你可以通過指令行輕松地查找新的包，安裝并保持更新，而不需要你打開浏覽器。
<code>對 es6 子產品文法的支援</code>。你可以使用最新的 ecmascript 6 子產品文法來編寫子產品。這還是一種實驗性的特性，它會被轉換成 es5，進而你可以在所有流行的浏覽器中使用編寫的代碼。
<code>phantomjs 單元測試</code>。你可以通過 phantomjs 輕松地運作單元測試。當你建立新的應用程式的時候，它還會為你自動建立測試内容的骨架。
node.js 版本要求為 v0.10.x+，npm 版本要求為 v2.1.0+，運作下面指令 檢查版本：
也可以檢查 git 版本：
確定 node 安裝之後，安裝 yeoman 工具集：
運作下面指令檢查是否安裝成功：
你可以安裝 web 應用的生成器
建立一個目錄用于作為工程目錄：
你可以檢視所有的生成器：
運作 angular 生成器，會提示你是否使用 sass 和引入 bootstrap，以及加載哪些 angular 子產品：
選擇需要下載下傳的子產品，然後回車。過一段時間之後，生成的目錄結構如下：
運作下面指令啟動服務：
浏覽器通路 ，你會看到：
打開 scripts/controllers/main.js ，代碼修改為：
修改 views/main.html，将 todos 中的項目以 input 标簽形式輸出：
頁面會顯示如下：
首先，添加一個輸入框和添加按鈕，将 views/main.html 修改為：
這時候，頁面内容如下：
修改 main.js 添加 addtodo() 事件：
這樣，就完成了添加 todo 項的功能。
先在清單中每一個 todo 項目的邊上加上一個移除按鈕，修改 views/main.html 中 <code>todos list</code> 注釋部分的代碼為：
修改 main.js 添加 <code>removetodo($index)</code> 事件：
現在，删除按鈕能夠響應删除事件了。雖然我們可以添加和移除 todo 事項，但是這些記錄都不能永久地儲存。一旦頁面被重新整理了，更改的記錄都會不見了，又恢複到 main.js 中設定的todo 數組的值。
另外，上面添加 todo 項時，如果重複添加相同的記錄，則背景會報錯，這是因為腳本中沒有做校驗。
添加參數 <code>--save</code> 可以更新 bower.json 檔案中關于 angular-ui-sortable 和 jquery-ui 的依賴，這樣你就不用手動去 bower.json 中更新依賴了。
再次啟動 grunt server：
為了使用sortable子產品，我們需要在 scripts/app.js 中更新angular 子產品，将 sortable 可以加載到我們的應用中，更改前代碼， 将 ui.sortable 添加進數組中,如下：
最後，在 views/main.html 中，我們需要将 <code>ui-sortable</code> 指令作為一個 div 将 <code>ng-repeat</code> 層包起來。
添加一些内聯的 css，将滑鼠顯示為 “可移動” 樣式來告訴使用者這些 todo 項是可以移動的：
完整代碼如下：
服務浏覽器，我們就可以對 todo 事項進行拖拽排序了。
下載下傳依賴：
編輯 scripts/app.js 添加 localstoragemodule的 擴充卡:
同時也要配置 localstorageserviceprovider，用 ls 作為 localstorage名稱字首：
完整的 scripts/app.js 檔案：
然後，需要修改 scripts/controllers/main.js ，改為從本地存儲通路資料：
在浏覽器中檢視應用，你會發現 todo 清單中沒有任何東西。因為這個應用從本地存儲中讀取了 todo 數組，而本地存儲中還沒有任何 todo 項。
在添加一些項目到清單後，我們再次重新整理我們的浏覽器的時候，這些項目都還在。
先安裝依賴：
首先，修改 karma.conf.js，添加
最終的樣子是：
現在回到指令行結束 grunt server 的程序（使用 <code>ctrl+c</code>）。在 gruntfile.js 中已經有了用于運作測試的 grunt 任務，可以直接像下面這樣運作：
修改 test/spec/controllers/main.js 如下：
為了将應用釋出為産品版本，還需要做很多工作：
校驗我們的代碼
運作我們的測試
合并和縮小腳本和樣式來減少網絡請求
優化任何使用到的圖像
對所有輸出進行編譯處理，使程式瘦身
實作上述目标隻需一句：
這個指令将會完成 grunt 的任務以及根據 gruntfile.js 檔案進行配置，建立一個可以運作的應用版本。隻需等上一分鐘，你就能得到一個完整的編譯版本，和一份編譯過程耗時的報告。
編譯完成後的檔案，放在了 dist 目錄下，是一個可以拿去伺服器上的部署的真正的産品。
你也可以運作下面指令自動編譯項目，并且啟動 web 伺服器
anugular 生成器也支援建立新的視圖、指令和控制器。例如：可以通過運作 <code>yo angular:route routename</code> 搭建一個新的控制器，同時在 app.js 中的路由也會被更新。
當然，yeoman 還可以做更多的事情，它還支援其他架構的腳手架。