grunt入門講解6：grunt使用步驟和總結

Grunt是啥？

很火的前端自動化小工具，基於任務的命令行構建工具。

Grunt能幫咱們幹啥？

假設有這樣一個場景：

編碼完成後，你須要作如下工做

1. HTML去掉注析、換行符 - HtmlMin
2. CSS文件壓縮合並 – CssMinify
3. JS代碼風格檢查 – JsHint
4. JS代碼壓縮 – Uglyfy
5. image壓縮 - imagemin

重複而枯燥的工做太多了，咱們須要一個自動化的工做流程，讓咱們更專一於coding，而不是coding外的繁瑣工做。因而Grunt應運而生。能夠想像，若是在node環境下，一行命令就搞定了上面的全部工做，是否是節省了不少時間。

Grunt安裝配置

安裝 grunt-cli

1. 自備node環境(>0.8.0), npm包管理

2. 卸載舊版本grunt（<0.4.0） (沒裝過請忽略)

npm uninstall grunt -g


3. 安裝grunt-cli

npm install grunt-cli -g

安裝 grunt-init(可選)

npm install grunt-init -g

可選安裝，grunt-init是個腳手架工具，它能夠幫你完成項目的自動化建立，包括項目的目錄結構，每一個目錄裏的文件等。具體狀況要看你運行grunt-init指定的模板，以及建立過程當中你對問題的回答。因爲篇幅且配置 grunt-init 模板較爲複雜，本課暫不展開討論，下一課將詳細講解。

配置 grunt

從官網下載package.json和Gruntfile.js 文件放到項目根目錄，並對文件進行修改配置.

• package.json //項目自動化所依賴的相關插件。
• Gruntfile.js //項目自動化工做流配置文件。

package.json 文件的基本內容：

Gruntfile.js 文件的基本內容：

在實際項目中的應用

1. 先配置好package.json、Gruntfile.js這兩個文件，具體如何配置，請看前面的課程講解。

2. 執行命令，自動下載依賴的Grunt插件
命令行執行:
npm install
3. 啓動任務live的執行，這個任務，你能夠用來監控你的源文件是否有變化。
命令行執行:
grunt live
4. 啓動任務build的執行，這個任務，你能夠用來合併全部的js源文件
命令行執行:
grunt build

Grunt使用總結

1. 配置簡單。配置文件Gruntfile.js是JS格式的，比較貼近前端的知識點。相對Ant之類的是基於JAVA的,並且又是xml配置，相對來講學習成本低。
2. Grunt能爲咱們作的遠不僅這麼多,不少Grunt插件待咱們去挖掘使用。
好比：haml less coffeeScript dataURI html2json
3. 每一個人的具體需求不同，能夠按本身的習慣合理配置，組合成最適合本身項目的自動化工做流。
4. Grunt團隊很勤勞，社區活躍，有興趣能夠持續關注。

 

 

 

加油