Grunt打造前端自動化工做流

Grunt這貨是啥？

最近很火的前端自動化小工具，基於任務的命令行構建工具 http://gruntjs.com

 

Grunt能幫咱們幹啥？

在開始介紹前，先向你們描述下面的場景:

【場景1：項目開始前】

1. 先創建一個 projA 的文件夾 再建 html css js images （建5個或以上文件夾，花費1分鐘）

2. 拷貝 CSS庫（Yui Reset | bootstrap）JS庫（Requiet.js | Seajs | jQuery | jQuery插件 ） 進相應目錄（拷貝 N個文件，花費N分鐘）

3. 再新建 html/index.html js/comm.js css/base.css css/comm.css css/module-A.css …… （建N個文件，花費N分鐘）

【場景2：編碼中】

編輯器編碼 => 切換到瀏覽器F5 => 編輯器編碼 => 切換到瀏覽器F5 => 編輯器編碼 => 切換到瀏覽器F5 => 編輯器編碼 => 切換到瀏覽器F5 …………

鍵盤就這樣杯具了….

【場景3：編碼完成】

1. HTML去掉注析、換行符 - HtmlMin

2. CSS文件壓縮合並 – CssMinify

3. JS代碼風格檢查 – JsHint

4. JS代碼壓縮 – Uglyfy

5. image壓縮 - imagemin

 

在一個項目過程當中，重複而枯燥的工做太多了…. 繩命就這樣浪費了。

咱們須要一個自動化的工做流程，讓咱們更專一於coding，而不是coding外的繁瑣工做。因而Grunt應運而生。能夠想像，若是在node環境下，一行命令搞定一個場景，So Cool…

 

Grunt安裝配置

安裝 grunt-cli

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

2. 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 //項目自動化工做流配置文件，重要

 

1. package.json 文件修改 官方文件地址

2. Gruntfile.js 文件修改 官方文件地址

 

開始一個實例

這裏以projA爲例子，實現的自動化功能以下：

• 編碼過程當中自動監控projA目錄，若是 .html/ .css/ .js文件變動時，自動刷新瀏覽器。

• 編碼完成後，壓縮html、css、js、img文件,並存放到dist/目錄下。

 

對應的操做步驟以下：

1. 1. 先配置好package.json、Gruntfile.js兩個文件，projA文件打包下載
    

2. 2. 執行命令自動下載相對應的Grunt插件【視頻演示戳這裏】
   命令行執行:

   npm install

3. 3. 啓動文件變動監控(livereload)【視頻演示戳這裏】
   命令行執行:

   grunt live

4. 4. 編碼完成後Build【視頻演示戳這裏】
   命令行執行:

   grunt build

 

Grunt使用總結

1. 1. 配置簡單，配置文件Gruntfile.js是JS格式，比較貼近前端知識點。相對Ant之類基於JAVA,又是xml配置，相對來講學習成本低。

2. 2. Grunt能爲咱們作的遠不僅這麼多,不少Grunt插件待咱們去挖掘使用。
   好比：haml less coffeeScript dataURI html2json

3. 3. 每一個人的具體需求不同，能夠按本身的習慣合理配置，組合成最適合本身的自動化工做流。

4. 4. Grunt團隊很勤勞，社區活躍，有興趣能夠持續關注。