Grunt

時間 2019-12-09

標籤 grunt 欄目 Node.js 简体版

原文原文鏈接

Grunt這貨是啥？

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

Grunt能幫咱們幹啥？

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

【場景1：項目開始前】

先創建一個 projA 的文件夾再建 html css js images （建5個或以上文件夾，花費1分鐘）
拷貝 CSS庫（Yui Reset | bootstrap）JS庫（Requiet.js | Seajs | jQuery | jQuery插件）進相應目錄（拷貝 N個文件，花費N分鐘）
再新建 html/index.html js/comm.js css/base.css css/comm.css css/module-A.css …… （建N個文件，花費N分鐘）

【場景2：編碼中】

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

鍵盤就這樣杯具了….前端

【場景3：編碼完成】

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

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

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

Grunt安裝配置

安裝 grunt-cli

1. 自備node環境(>0.8.0), npm包管理
2. 卸載舊版本grunt（<0.4.0） (沒裝過請忽略)
```
npm uninstall grunt -g
```
安裝grunt-cli
```
npm install grunt-cli -g
```

安裝 grunt-init(可選)

npm install grunt-init -gjson

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

配置 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. 先配置好package.json、Gruntfile.js兩個文件，projA文件打包下載
2. 執行命令自動下載相對應的Grunt插件【視頻演示戳這裏】
命令行執行:
```
npm install
```
3. 啓動文件變動監控(livereload)【視頻演示戳這裏】
命令行執行:
```
grunt live
```
4. 編碼完成後Build【視頻演示戳這裏】
命令行執行:
```
grunt build
```

Grunt使用總結

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