Yeoman入門之安裝及環境配置

YEOMAN的特性

1. Yeoman 是 Google 官方推薦的一款 AngularJS 開發工具。
2. 閃電般的初始化：項目開始階段，可以基於現有的末班框架（例如：HTML5 Bolierplate、Twitter Bootstrap）進行項目初始化的快速構建。
3. 了不起的構建流程：不僅僅包括JS、CSS代碼的壓縮、合併，還可以對圖片和HTML文件進行優化，同時對CoffeScript和Compass的文件進行編譯。
4. 自動編譯CoffeScript和Compass：通過LiveReload進程可以對源文件發生的改動自動編譯，完成後刷新瀏覽器。
5. 自動Lint代碼：對於JS代碼會自動進行JSLint測試，確保代碼符合最佳編程實踐。
6. 內置的預覽服務器：不再需要自己配置服務器了，使用內置的就可以快速預覽。
7. 驚人的圖片優化：通過使用OptiPNG和JPEGTran來優化圖片，減少下載損耗。
8. 殺手級包管理：通過bower search jQuery，可以快速安裝和更新相關的文件，不再需要打開瀏覽器自己搜索了。
9. PhantomJS單元測試：可以非常方便的使用PhantomJS進行單元測試，一切在項目初始的時候都準備好了。

安裝前的準備工作

1. 檢查系統中是否安裝了：Node.js、Ruby、Compass、Python。
2. Mac下安裝Node.js非常方便，首頁提供了一個pkg下載，雙擊後可以默認安裝node、npm到/usr/local/bin下，我們只需要確保/usr/local/bin包含在PATH變量中就可以。windows下安裝node.js的方法見：http://blog.csdn.net/panlingfan/article/details/27083909
3. Mac Mountain Lion 下自帶了Ruby，所以也就不需要再單獨安裝了，windows下安裝ruby的方法請看下面的”安裝ruby“。
4. Compass安裝需要依賴於Ruby Gems。所以只有先安裝了ruby，才能安裝Compass，安裝方法請看下面的”安裝Compass“。

安裝

環境準備好之後，就可以進行安裝了

安裝nodejs

安裝地址：http://blog.csdn.net/panlingfan/article/details/27083909 ，注：安裝完nodejs後，nodejs和npm就都完成了，不需要再重新安裝npm。

安裝ruby

1. 在ruby的官方網站http://rubyinstaller.org/downloads/下載ruby的安裝文件，Ruby 2.0.0-p481表示windows的32位系統，Ruby 2.0.0-p481(x64)表示windows的64位系統。用戶可針對各自電腦型號下載相應的安裝包                         
2. 安裝包下載成功後，運行安裝文件，按照步驟依次安裝，特別強調，安裝時下圖中的三個框全部選中。                                    
3. 安裝完成之後，打開命令行（如果找不到命令框，在開始程序那裏的搜索框中搜索ruby,就會出現這樣一個選項，，直接打開即可），在命令行中輸入以下命令：ruby –v。如果成功打出了版本號，說明Ruby安裝成功（下圖中的C:\Users\win7>不用在意，直接輸入ruby -v即可）。
   

安裝Compass

1. Compass是依賴於ruby的，如果電腦上沒有安裝ruby，就無法安裝compass。
2. compass是依賴於sass的，因此必須在完成sass的安裝後才能安裝compass。
3. 在cmd命令行中找到Ruby200主文件夾的位置，然後在改路勁下鍵入：gem install sass（windows系統下），等待30秒，注意，在安裝sass和compass時電腦必須鏈接互聯網。                                                                                                      
4. 再鍵入sass -v測試看是否安裝成功，如果出現了一個版本號說明安裝成功
   
5. compass的安裝和sass一樣，找到Ruby200主目錄，在cmd命令行中鍵入：gem install compass（windows系統下），sudo gem install compass（Linux或OS X下）。等待30秒的樣子，看到幾條這樣的信息就表示安裝成功了。                
6. 鍵入命令測試是否正常：compass -v。如果出現以下代碼表示compass正常運行。
   
   

安裝python

1. 在官網下載python的安裝包https://www.python.org/downloads/release/python-341/
   
   
2. 按照安裝步驟依次安裝，安裝成功後，配置python的環境變量，配置環境變量步驟如下
   1、單機我的電腦右鍵，選擇‘屬性’                                                                                                                                                                                                                                                                  2、單擊‘高級系統設置’，打開系統屬性對話框                                          
   3、在‘系統屬性’對話框單擊‘環境變量...’，打開‘環境屬性’對話框。                                                   
   4、在‘環境變量’對話框裏選中變量名稱爲path的變量，單擊‘編輯’按鈕，打開‘編輯系統變量’對話框 
   5、在‘編輯系統變量’裏的‘變量值’一欄中所有變量值的最後加上一個英文版的”；“，然後加上將python.exe所在的目錄複製上去，比如我的python.exe的路徑爲D：\python34                                                                  
   
   
3. 以上步驟做完後點擊三個確定，即完成python的簡易安裝。
4. 打開cmd命令框，輸入python命令即可檢測是否安裝成功，如果出現以下代碼表示安裝成功
   
   

安裝YEOMAN

1. 打開cmd黑窗口，在node.js目錄下鍵入：npm install yeoman，我的node.js目錄在d:/js_tools/nodejs/node_modules等待大概2秒，會出現以下代碼，如果你的網速比較慢，可能會下載很久，等吧。                                                                           
2. 
   
3. 看到下圖這張說明yeoman安裝成功。
   
   
4. 配置Yeoman的環境變量，我的node.js在C:\Program Files (x86)\nodejs裏面，和Yeoman不在同一個路徑，不要把兩者路徑混淆了。配置Yeoman的環境變量和配置python的環境變量一樣，不過把最後一步的‘變量值’的路徑改成yeoman的路徑即可，我的Yeoman的路徑爲：C:\Users\win7\node_modules\.bin
5. 環境變量配置成功後，打開cmd命令窗口，如果找不到，可以在開始程序那兒搜索cmd，即可找到cmd命令。鍵入:yeoman init                                                                                            
   
   
6. 所有問題全部輸入y（y表示yes），然後回車，Yeoman會自動創建一些目錄和文件。完成之後輸入yeoman server啓動服務器。                                                                      
7. 成功之後會自動彈出你的默認瀏覽器，顯示如下：                                               
   
8. 如果看到以上內容，說明你的yeoman環境已經ok了，如果有報錯，內容無法再默認瀏覽器中出現，使用以下命令嘗試強制啓動：yeoman server -force，如果強制啓動成功就算ok，有一些小錯誤可以無視，不影響開發的（yeoman一直在弄一些新東西，不太穩定）。

以上步驟我自己親自嘗試過，安裝成功。雖然中間配置變量時有一些小波折，但總算順利安裝了。