Grunt JS – 前端壓縮 JavaScript 與 CSS 工具

Grunt

算是一個用來發佈前端程式的部屬工具。例如壓縮 JS、CSS。

 

事前準備

 

透過 NPM 安裝 GruntJS

*若要移除的話是 npm uninstall -g grunt-cli

添加設定

參考官網。我們會需要一些相關的外掛,所以在你的專案資料夾內的根目錄,添加文件 package.json

這邊有幾項套件可以依照需求添加,還有更多套件可參考官方的套件管理列表。上面的範例我挑著用喔!版本設定也可以指定 『*』

透過 npm 的指令,將 Grunt 的相依套件都一併的自動下載與安裝。

 

建立 Task Script 的設定檔

Grunt JS 會依照這個文件的規則做壓縮。所以我們要在這裡修改想要的設定。官方提供的範例在這裡。但因為我們有使用一些外掛套件,所以參考了網友要修改成以下的 Gruntfile.js。一樣放在根目錄。

接著把上面的設定改為你的 JS 與 CSS 位置以後,再執行

就能進行壓縮、監控、合併檔案囉!

 

參考出處

  1. Grunt JS 教學 – 請黃牛幫忙壓縮 JavaScript 與 CSS
  2. 前端js和css的压缩合并之grunt

發表迴響