前端項目可以更簡單—Yeoman入門指南（1）

什麼是Yeoman

很難使用一句話來表述Yeoman用途，因為Yeoman其實是三個工具的集合：YO、GRUNT、BOWER，所以需要先解釋下這三個工具的用途。

• YO：Yeoman核心工具，項目工程依賴目錄和文件生成工具，項目生產環境和編譯環境生成工具
• GRUNT：grunt去年很火，前端構建工具，jquery就是使用這個工具打包的
• BOWER：Web開發的包管理器，概念上類似npm，npm專註於nodeJs模塊，而bower專註於CSS、JavaScript、圖像等前端相關內容的管理

infoq的有篇yeoman的介紹文章：《Yeoman：構建漂亮Web應用的工具和框架》，標題對yeoman的定義不算準確。

yeoman定義了一套用於提高前端工程師效率的規範工作流工具。

效率和規範是yeoman的核心訴求，後面明河講解yeoman使用場景時會說到，yeoman是如何提高你的項目效率。

打個比喻：如果前端項目是工廠的產品的話，yeoman就像工廠的流水線，標準化、傻瓜化、批量化產品生產，生產過程乏味了，但效率提高了。

什麼場景下使用yeoman？

假設，明河接到一個項目：火車票訂票系統，代碼層面，前幾天思考的問題如下：

1.項目目錄該如何規劃？

2.使用什麼類庫來支撐系統開發？

3.生產環境如何搭建（比如很多前端的生產環境是基於php，也有基於NodeJs）4.編譯環境如何搭建（編譯環境其實應該歸到生產環境中，但前端很多人使用coffeescript/less/sass等，所以需要編譯環境）

5.單元測試環境如何搭建？

6.調試環境如何搭建（本地代理遠程assets等）

7.開發完畢后打包部署如何處理？

我相信多數前端在項目coding前肯定都會碰上類似的問題，你是花半天、1天、2天解決？

假如你是多人合作呢？問題更嚴重，如何保持團隊環境和代碼規範的一致性？教團隊成員裝依賴？配置工具？大費口舌告之規範？

沒做一個項目，你都會遇到相同問題，再重複一遍？

親累不？

用yeoman！1行命名，15秒進入coding狀態！

想嘗試下嗎？往下看~

yeoman的簡單使用

安裝yeoman

需要用到npm，安裝 yo、grunt-cli、bower

安裝成功后，會看到下面的提示：

留意yo的二個模塊：generator-mocha和generator-webapp，generator-前綴的模塊表明它是一種工程模版，比如你的web工程是基於bootstrap框架，那麼可以安裝generator-bootstrap，使用yo來自動生成該目錄（會帶上bootstrap的源碼）。

生成工程目錄

創建（或打開）你的工程根目錄，比如demo-app，然後運行命令：

webapp是yo自帶的工程模版帶有：html5 Boilerplate、jquery、Modernizr、Bootstrap、RequireJS等框架。

yeoman有個非常人性化的功能，帶有問答功能，比如上圖中，yeoman詢問你，你的工程需要Bootstrap(sass)框架嗎？

需要輸入「n」，因為需要sass運行環境（ruby）window下麻煩，先不引入。

yeoman還會詢問你，你的工程需要RequireJS模塊載入框架嗎？

我們繼續輸入「Y」，OK，工程生成完畢，可以看下目錄情況。

一切如此簡單，你不需要再手動創建工程目錄，也不需要再費事的google搜索下需要的框架，然後再下載，解壓到工程目錄。

使用一行命令，然後就立馬進入coding狀態！這就是yeoman提高前端工作的地方。

還沒完，yeoman如果只能幫你創建工程目錄，還不足以給我們驚喜。

如果我的工程中需要sass/less/coffscript編譯呢？

我的工程中有ajax請求，需要放在apache的目錄下？

我寫了單元測試，如何回歸？

…..

這些問題，在yeoman中都不是問題，因為已經集成在內了。

起個Node伺服器

yeoman內置了Node伺服器服務，而且會監聽工程目錄下的文件的改變，一旦文件發生改變會重新編譯文件（sass/less/coffscript）。

下面輪到grunt上場，在工程目錄下，運行命令：

分享之前我還是要推薦下我自己的前端學習群：180-442-230，不管你是小白還是大牛，小編我都挺歡迎，不定期分享乾貨，包括我自己整理的一份2017最新的前端資料和零基礎入門教程，送給大家，歡迎初學和進階中的小夥伴

啟動成功後會自動打開本地瀏覽器，默認地址為，9000埠號，可能被佔用，這時候打開gruntfile.js文件（grunt的任務配置文件），找到：

修改下port，即可。

回歸測試用例

Yeoman默認使用mocha作為測試框架，是在 PhantomJS環境下進行回歸測試。

運行如下命令：

啟動成功，並回歸成功，你可以在test目錄下找到測試代碼：

工程中引入其他類庫

比如，我想要在工程中引入 underscore

bower上場了，使用bower從在線包管理器中拉取underscore代碼

Yeoman特性總結

偷下懶，抄下其他人的翻譯：

• 快速創建骨架應用程序——使用可自定義的模板（例如：HTML5、Boilerplate、Twitter Bootstrap等）、AMD（通過RequireJS）以及其他工具輕鬆地創建新項目的骨架。
• 自動編譯CoffeeScrip和Compass——在做出變更的時候，Yeoman的LiveReload監視進程會自動編譯源文件，並刷新瀏覽器，而不需要你手動執行。
• 自動完善你的腳本——所有腳本都會自動針對jshint（軟體開發中的靜態代碼分析工具，用於檢查JavaScript源代碼是否符合編碼規範）運行，從而確保它們遵循語言的最佳實踐。
• 內建的預覽伺服器——你不需要啟動自己的HTTP伺服器。內建的伺服器用一條命令就可以啟動
• 非常棒的圖像優化——Yeoman使用OptPNG和JPEGTran對所有圖像做了優化，從而你的用戶可以花費更少時間下載資源，有更多時間來使用你的應用程序。
• 生成AppCache清單——Yeoman會為你生成應用程序緩存的清單，你只需要構建項目就好
• 殺手級」的構建過程——你所做的工作不僅被精簡到最少，讓你更加專註，而且Yeoman還會優化所有圖像文件和HTML文件、編譯你的CoffeeScript和Compass文件、生成應用程序的緩存清單，如果你使用AMD，那麼它還會通過r.js來傳遞這些模塊。這會為你節省大量工作
• 集成的包管理——Yeoman讓你可以通過命令行（例如，yeoman搜索查詢）輕鬆地查找新的包，安裝並保持更新，而不需要你打開瀏覽器
• 對ES6模塊語法的支持——你可以使用最新的ECMAScript 6模塊語法來編寫模塊。這還是一種實驗性的特性，它會被轉換成eS5，從而你可以在所有流行的瀏覽器中使用編寫的代碼
• PhantomJS單元測試——你可以通過PhantomJS輕鬆地運行單元測試。當你創建新的應用程序的時候，它還會為你自動創建測試內容的骨架