前端項目建構之grunt學習篇

window環境

安裝npm包管理器,假如安裝的nodejs版本較高的話,npm會自動安裝的,可以用<code>npm --version</code> 來檢查是否安裝.

全局安裝grunt任務管理器，指令<code>npm install -g grunt</code>,<code>-g</code> 代表安裝在全局.

安裝grunt cli,指令<code>npm install -g grunt-cli</code>,這是一個執行gruntfile中不同版本的grunt用的，這樣可以保證在不同的grunt版本中切換.

*nix環境

類unix環境跟window環境差不多，隻是安裝的時候，權限不足的話，指令之前加上<code>sudo</code>,比如安裝grunt,指令<code>sudo npm install -g grunt</code>.

grunt配置裡有兩大檔案，一個是<code>package.json</code>,另一個是<code>gruntfile.js</code>

package.json 檔案

package.json主要用來描述，目前網站運作grunt任務的名稱，作者,版本,以及grunt任務依賴的nodejs子產品，其實這也是nodejs子產品的标準描述檔案.

主要有以下幾個參數:

name: 名稱

version: 版本

author: 作者

devdependencies: 依賴項

這裡給個例子

gruntfile.js 檔案

gruntfile.js主要用來配置各個任務的參數，比如合并檔案的來源和目的，壓縮任務的來源和目的。

gruntfile主要做三件事

配置參數，用<code>grunt.initconfig</code>方法

加載任務子產品, 用<code>require('load-grunt-tasks')(grunt)</code>方法,這個會自動的加載任務用到的子產品，而不用每個子產品寫一句加載代碼，像這樣<code>grunt.loadnpmtasks('grunt-contrib-uglify');</code>

注冊一個配置任務,用<code>grunt.registertask</code>方法

配置參數的核心就是每個任務都需要一個target，然後每個target都會包含一個files或者option,files可以是簡單風格，檔案數組，檔案對象.

這裡我放上我自己寫的例子

做完上面的準備工作之後，就拿我那個例子來說，執行指令如下

這個指令會先執行clean來清空目标檔案夾，然後執行concat來合并檔案，最後執行uglify來壓縮檔案