ria之家
2013-04-25
4659閱讀
今天明河介紹乙個比較新的前端工具：yeoman。
很難使用一句話來表述yeoman用途，因為yeoman其實是三個工具的集合：yo、grunt、bower，所以需要先解釋下這三個工具的用途。
infoq的有篇yeoman的介紹文章：《yeoman：構建漂亮web應用的工具和框架》，標題對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狀態！
想嘗試下嗎？往下看~
需要用到npm，安裝 yo、grunt-cli、bower
npm install
-g yo grunt
-cli bower
npm install
-g generator
-bootstrap
yeoman有個非常人性化的功能，帶有問答功能，比如上圖中，yeoman詢問你，你的工程需要bootstrap(sass)框架嗎？
需要輸入「n」，因為需要sass執行環境（ruby）window下麻煩，先不引入。
yeoman還會詢問你，你的工程需要requirejs模組載入框架嗎？
我們繼續輸入「y」，ok，工程生成完畢，可以看下目錄情況。
使用一行命令，然後就立馬進入coding狀態！這就是yeoman提高前端工作的地方。
還沒完，yeoman如果只能幫你建立工程目錄，還不足以給我們驚喜。
如果我的工程中需要sass/less/coffscript編譯呢？
我的工程中有ajax請求，需要放在apache的目錄下？
我寫了單元測試，如何回歸？
…..這些問題，在yeoman中都不是問題，因為已經整合在內了。
yeoman內建了node伺服器服務，而且會監聽工程目錄下的檔案的改變，一旦檔案發生改變會重新編譯檔案（sass/less/coffscript）。
下面輪到grunt上場，在工程目錄下，執行命令：
grunt serveroptions
:
yeoman預設使用mocha作為測試框架，是在 phantomjs環境下進行回歸測試。
執行如下命令：
grunt test比如，我想要在工程中引入 underscore
bower install underscore
grunt
前端 使用yeoman建立乙個空專案
利用yeoman一鍵建立專案，方便很多，不需要自己去配置很多東西 2.安裝yeoman 開啟cmd命令，使用npm install g yo 安裝yeoman yo version可以檢視是否安裝成功 3.安裝webpack 命令為 npm install g generator react web...
專案管理其實可以簡單一點 專案繼續
前面講到的都是團隊建設的東西，似乎也不是短期可以把握的 有些理念是根深蒂固的，非經歷不能認知，慶幸的是我很早以前就認識到了 尤其是人性方面，不過我覺得己所不欲勿施於人，首先還是得從專案經理做起，誰叫你是帶頭的呢！能把手下這一幫人搞定，是需要些本事的。雖然一時還未必能達到，至少能朝著方向努力。不論如何...
前端換mac可以參考搭一下簡單的環境
安裝嚮導，注意的地方，mac必須先設定乙個密碼。裝好之後就可以安裝各種套件。brew install nvm安裝完成之後nvm命令可能不存在，此時需要配置環境變數。vi etc profile將以下內容貼上到文字末 for nvm export nvm dir nvm source brew pre...