搭建前端開發環境

採用node + grunt + bower + karma + jasmine搭建前端開發環境。（windows環境爲例）

• 安裝開發包的工具：node （安裝grunt，bower，karma，karma-jasmine等開發和測試工具包）

• 構建工具：grunt （合併，代碼檢查、壓縮等，以及能夠插件式植入其餘task）

• Js庫依賴管理工具：bower （管理開發用到的js、css庫，例如：jquery， angular，bootstrap）

• 測試框架：karma + jasmine
  

步驟一：安裝node

到官網https://nodejs.org/en/download/下載並安裝，配置好環境變量。

在cmd下輸入命令：

node -v

輸出node版本號，則代表node安裝成功。

通常狀況下，npm也就安裝好了，輸入命令驗證一下：

npm -v

輸出npm的版本號。若是npm未安裝，請自行安裝npm。

npm全稱Node Package Manager，是Node JS包管理和分發工具。有了npm，下面的安裝直接命令搞定。

步驟二：安裝grunt

先安裝grunt-cli，是grunt的命令行工具，有了它才能在cmd裏執行grunt命令。

npm install -g grunt-cli

其中，「-g」的意思是全局安裝。

驗證安裝成功與否，執行命令：

grunt --version

輸出grunt-cli的版本號。

因爲目前的grunt必須安裝在項目目錄，這裏暫時不安裝grunt，下一篇實戰篇介紹grunt，但先記下安裝命令：

npm install grunt

步驟三：安裝bower

執行安裝命令：

npm install -g bower

驗證安裝成功與否，執行命令：

bower -v

輸出bower版本號。

步驟四：安裝測試框架karma + jasmine

執行安裝karma的命令：

npm install -g karma

驗證安裝成功與否，執行命令：

karma start

輸出karma服務啓動在http://localhost:9876，訪問此網址可看到「Karma 版本號 - Connected」字樣。

安裝集成包karma-jasmine，執行命令：

npm install -g karma-jasmine

安裝如下js庫，以加強測試框架。

1. karma-chrome-launcher：開始測試時，會自動啓動chrome瀏覽器（需已經安裝好chrome瀏覽器），並開始執行測試用例。

2. karma-coverage：測試覆蓋率，測試執行完成後自動生成覆蓋率報告，網頁方式展現，至關友好。
   

---

copyright = {
    "做者": "墨衣夜行", 
    "本文連接": "http://my.oschina.net/letao/blog/516056"
}