Grunt快速入門

Grunt是基於JavaScript的命令列構建工具，它可以幫助開發者們自動化重複性的工作。你可以把它看成是JavaScript下的Make或者Ant。它可以完成諸如精簡、編譯、單元測試、lint檢查等工作。

Grunt的三大主要組成部分：

• Grunt CLI
• Grunt Task Runner
• Grunt Plugins

Grunt CLI

安裝：

npm install grunt-cli -g

上面的命令將全域性安裝 grunt-cli 包，這樣在任何目錄下都可以呼叫grunt命令。Grunt CLI不包括grunt task runner。

要使用 grunt task runner，我們需要將其作為應用的開發依賴安裝。grunt和grunt-cli的分離確保每個團隊的成員使用同一版本的grunt task runner。

Grunt Task Runner

grunt命令會呼叫Grunt task runner。我們需要將其作為應用的開發依賴安裝。讓我們先開一個目錄，放置我們的部落格應用示例。

mkdir blog
cd blog

上面已經提到，Grunt要作為應用的開發依賴安裝。所以我們需要建立一個定義應用元資訊的package.json檔案。執行npm init命令，回答一些問題即可建立package.json檔案:

$ npm init
name: (blog) 
version: (0.0.0) 
description: My awesome blog
entry point: (index.js) 
test command: 
git repository: 
keywords: 
author: 
license: (BSD-2-Clause) 
About to write to /Users/shekhargulati/blog/package.json:
{
  "name": "blog",
  "version": "0.0.0",
  "description": "My awesome blog",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "BSD-2-Clause"
}
Is this ok? (yes) 

完成這一步之後，init命令會為我們建立 package.json 檔案。由於我們不需要 main、scripts、author和license這些專案，我們可以刪掉它們。現在我們有了一個最簡單的 package.json 檔案。

{
  "name": "blog",
  "version": "0.0.0",
  "description": "My awesome blog"
}

執行下面的命令將Grunt安裝到本地：

npm install grunt --save-dev

上面的命令將安裝所需的依賴，同時也會更新 package.json。

{
  "name": "blog",
  "version": "0.0.0",
  "description": "My awesome blog",
  "devDependencies": {
    "grunt": "~0.4.1"
  }
}

Grunt Plugins

Grunt有一個良好的外掛體系，我們需要的大多數任務都有相應的外掛加以處理。Grunt的外掛可以用npm安裝。這裡我們將使用外掛——grunt-contrib-uglify。

Gruntfile

現在我們該告訴 GruntJS該做哪些任務了。如果我們在blog目錄中執行grunt命令，我們會看到如下的錯誤資訊：

$ grunt
A valid Gruntfile could not be found. Please see the getting started guide for
more information on how to configure grunt: http://gruntjs.com/getting-started
Fatal error: Unable to find Gruntfile.

為了使用Grunt，我們需要建立一個名為Gruntfile.js的檔案。Gruntfile指定grunt需要執行的任務。這個檔案包含了構建指令碼。

在blog目錄下建立一個新檔案，起名為 Gruntfile.js，加入下列程式碼：

module.exports = function(grunt){

};

這是我們開始使用Gruntfile所需的樣板。

接著我們需要配置grunt需要執行的任務。我們呼叫grunt的initConfig函式，將配置物件傳遞給它。目前，配置物件是空白的。

module.exports = function(grunt){
    grunt.initConfig({

    })  
};

壓縮JS

我們要執行的第一項任務是壓縮應用中的javascript檔案。在blog目錄中建立一個js資料夾，然後建立一個名為app.js的新檔案。

$ mkdir js
$ cd js
$ touch app.js

在文字編輯器中開啟app.js，在其中加入如下內容。app.js檔案有兩個簡單的方法hello和bye。

function hello(name){
    return "Hello, " + name;
}
function bye(name){
    return "Bye, " + name;
}

現在我們在grunt配置物件中新增uglify任務。

module.exports = function(grunt) {
  grunt.initConfig({
    uglify: {
      build: {
        src: ['js/app.js'],
        dest: 'js/app.min.js'
      }
    }
  });
  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.registerTask('default', ['uglify']);
};

上面的程式碼做了這些事：

• 我們配置了uglify任務，指定了原始檔和目標檔案。
• 接著我們載入了grunt-contrib-uglify外掛。在執行grunt命令之前，確保外掛已經安裝。所有的grunt外掛都可以通過npm安裝。
• 最後，我們將這個uglify任務註冊為我們的預設任務。當我們未指定任務名稱而直接執行grunt命令的時候，Grunt將呼叫預設任務。

特定專案的任務不必在Gruntfile中定義。他們可以定義在外部.js檔案中，並通過grunt.loadTasks 方法載入。

如果我們執行grunt命令，我們會碰到下面的資訊：

>> Local Npm module "grunt-contrib-uglify" not found. Is it installed?
Warning: Task "uglify" not found. Use --force to continue.

Aborted due to warnings.

執行下面的命令安裝grunt-contrib-uglify外掛。

npm install grunt-contrib-uglify --save-dev

然後再次執行grunt命令，這次我們將看到成功的資訊。

$ grunt
Running "uglify:build" (uglify) task
File "js/app.min.js" created.
Done, without errors.

它成功地建立了app.min.js檔案。app.min.js如下所示，所有的空格被刪除了，函式的引數被重構為單一字母，整個檔案被壓縮成一行。

function hello(a){return"Hello, "+a}function bye(a){return"Bye, "+a}