grunt搭建自動化的web前端開發環境

首先，下面的操作使用的都是淘寶映象NPM（全域性使用命令：npm install -g cnpm --registry=https://registry.npm.taobao.org即可安裝），使用這個的原因是由於NPM的伺服器在國外，下載特別慢，使用淘寶NPM下載外掛比較快。

1、安裝Nodejs

Grunt和所有grunt外掛都是基於nodejs來執行的，安裝nodejs非常簡單，去 https://nodejs.org/ 上，點選頁面“install”按鈕即可。安裝了nodejs之後，可以在你的控制檯中輸入“node -v”來檢視nodejs的版本，也順便試驗nodejs是否安裝成功。

2、安裝grunt命令列

要想使用grunt，首先必須將grunt-cli安裝到全域性環境中，用管理員許可權開啟cmd,輸入：cnpm install -g  grunt-cli,回車，命令列會出現一個轉動的小橫線，表示正在聯網載入。載入完成後，可以使用grunt命令驗證是否安裝成功：

上圖表示安裝成功

3、建立一個網站在F盤下建立一個“grunt_test”資料夾，裡面建了build、src、test三個空資料夾以及package.json、Gruntfile.js兩個檔案。package.json中的內容如下：

4、安裝grunt

進入F:\grunt_test目錄，然後輸入命令：cnpm install grunt --save-dev，這句命令的意思是在當前目錄安裝grunt的同時，順便把grunt儲存為這個目錄的開發依賴項。回車後：

此時可以看見package.json檔案中“devDependencies”有所變化：

同時grunt_test目錄也有所變化，多了一個“node_modules”資料夾：

此時在命令列輸入：grunt,回車後會出現：

先不管，接著往下。。。

5、配置Gruntfile.js

然後在命令列輸入：grunt，回車後出現：

7、grunt外掛介紹

grunt官網的外掛列表頁面 http://www.gruntjs.net/plugins ，外掛分為兩類。第一類是grunt團隊貢獻的外掛，這些外掛的名字前面都帶有“contrib-”字首，而且在外掛列表中有星號標註。第二類是第三方提供的外掛，不帶有這兩個特徵。

• Contrib-jshint——javascript語法錯誤檢查；

• Contrib-watch——實時監控檔案變化、呼叫相應的任務重新執行；

• Contrib-clean——清空檔案、資料夾；

• Contrib-uglify——壓縮javascript程式碼

• Contrib-copy——複製檔案、資料夾

• Contrib-concat——合併多個檔案的程式碼到一個檔案中

• karma——前端自動化測試工具

8、grunt外掛配置

輸入grunt，安裝完成