Grunt你貼心的小助手

上週在公司內部分享了利用Grunt打造前端開發自動化工做流，這周整理了一篇文章出來，用於記錄。

什麼是Grunt

Grunt是基於NodeJs的一個任務管理器，簡單的來說就是JavaScript幫助你完成諸如CSS/JavaScript的代碼風格檢查、合併、壓縮，圖片壓縮處理，LESS、SASS的編譯等等。它能夠幫助你自動化構建、測試代碼、生成文檔，固然它還能夠作的更多。

 Grunt生態系統很是龐大，而且一直在增加。因爲擁有數量龐大的插件可供選擇，所以，你能夠利用Grunt自動完成任何事，而且花費最少的代價。若是你找不到你想要的插件，你能夠本身編寫一個併發布出來供你們使用。

 Grunt官網：http://gruntjs.com
 Grunt插件地址：http://gruntjs.com/plugins
 Grunt中文網：http://www.gruntjs.net/

環境搭建、安裝及配置

NodeJs環境搭建

由於Grunt是基於NodeJs的，因此首先須要搭建NodeJs的環境，如今NodeJs的官網（http://nodejs.org/）已經有了windows版本的安裝包很是方便，下載對應的版本進行安裝，以windows7操做系統爲例。

1.下載node-v0.10.26-x64.msi （個人系統是64位的）

2.直接安裝

3.修改npmrc文件，由於天朝的限制（大家懂的）在線安裝NPM模塊的速度之比蝸牛快那麼一點，咱們不得不把NPM的registry地址修改下：

進入你的NodeJs安裝目錄，找到 ~\nodejs\node_modules\npm\npmrc 文件並打開，在文件的最下面加入一行代碼：

registry = http://registry.cnpmjs.org

就像下面這樣：

完成上述步驟後能夠運行cmd，輸入node -v 和 npm -v 查看NodeJs和NPM的版本，一樣這表明了你已經完成了NodeJs的運行環境搭建。

grunt-cli安裝

須要經過NPM來全局安裝grunt-cli，輸入npm install -g grunt-cli 進行安裝：

（由於咱們以前從新指定了registry的地址，因此下載安裝速度飛快啊。）

實際案例操做

package.json 和 Gruntfile.js

要想使用grunt，package.json和Gruntfile.js兩個文件是必須的，兩個文件必須放在同一級同時最好放在項目的根目錄中。

package.json

package.json，包含了項目的一些基本信息和grunt所須要的插件列表信息，能夠複製如下代碼用來建立一個package.json文件。

*name 填寫你的項目名稱

*version 填寫項目的版本號

*evDependencies 所依賴的插件列表

經過npm install命令就能夠自動安裝devDependencies中羅列的插件了

同時項目文件夾中會生成一個node_modules文件夾，裏面就是下載安裝好的各個依賴的插件了。

Gruntfile.js

Grunt的全部任務都是經過Gruntfile.js來配置的，你須要：

經過grunt.initConfig() 來配置任務

經過grunt.loadNpmTasks() 來聲明加載插件

經過grunt.registerTask() 定義任務組合

下面的代碼配置了JavaScript壓縮、CSS壓縮、拷貝文件、監聽文件四個任務，經過grunt.registerTasks()將它們組合成了兩個任務分別是default默認任務，wh監聽文件任務。

點擊下載：Gruntfile.js

在終端中輸入命令grunt來運行default任務，輸入grunt wh來運行watch任務。

配置grunt-contrib-watch

grunt-contrib-watch是一款能夠實時監聽項目文件添加、修改、刪除時自動運行預先設置或刷新頁面任務的Grunt插件，能夠經過npm install grunt-contrib-watch --save-dev，來安裝watch插件，安裝好之後package.json會自動將其加入列表中。

github地址：https://github.com/gruntjs/grunt-contrib-watch

配置watch及livereload任務

上面的代碼配置了監聽CSS/JS文件夾下的文件（但不包括壓縮文件），當文件內容更改時，自動執行壓縮任務，並經過livereload任務刷新頁面。

想要頁面自動刷新須要客戶端和livereload進行通訊了，官方文檔列出了四種通訊方式：

1.在頁面上使用livereload.js

2.在瀏覽器上使用Live Reload插件

3.使用connect-livereload中間件

4.使用庫tiny-lr，來實現

最方便的仍是第一種，在前面加上,在終端輸入grunt wh就開始監聽文件了，只要文件被修改過，就會自動觸發配置的任務。

總結

1.Gruntfile.js 的語言是js，貼近前端，學習成本低。

2.Grunt的配置和使用是很是簡單的，每一個人能夠根據本身的習慣去安裝插件配置任務，搭建本身的自動化工做流。

3.Grunt能作的事情不止這些，還有不少其它的功能等待咱們去挖掘

附件：
PPT與示例源代碼