開始使用

Grunt 和 Grunt 外掛程式是透過 npm 安裝和管理的，Node.js 套件管理員。Grunt 0.4.x 需要穩定的 Node.js 版本 >= 0.8.0。

在設定 Grunt 之前，請透過執行 npm update -g npm 確保您的 npm 是最新的（在某些系統上可能需要 sudo）。

如果您已經安裝了 Grunt，現在正在尋找一些快速參考，請查看我們的 Gruntfile 範例和如何設定任務。

安裝 CLI

使用 Grunt 0.3？請參閱 Grunt 0.3 備註

為了開始，您需要在全球安裝 Grunt 的命令列介面 (CLI)。您可能需要使用 sudo（對於 OSX、*nix、BSD 等）或以管理員身分執行您的命令殼層（對於 Windows）來執行此操作。

npm install -g grunt-cli

這將把 grunt 指令放入您的系統路徑中，允許它從任何目錄執行。

請注意，安裝 grunt-cli 並不會安裝 Grunt 任務執行器！Grunt CLI 的工作很簡單：執行已安裝在 Gruntfile 旁邊的 Grunt 版本。這允許同時在同一台機器上安裝多個版本的 Grunt。

CLI 的運作方式

每次執行 grunt 時，它都會使用節點的 require() 系統尋找已安裝的 Grunt。因此，您可以從專案中的任何子資料夾執行 grunt。

如果找到已安裝的 Grunt，CLI 會載入 Grunt 函式庫的本機安裝，套用您的 Gruntfile 中的設定，並執行您要求它執行的任何任務。要真正了解發生了什麼事，請閱讀程式碼。

使用現有的 Grunt 專案

假設已安裝 Grunt CLI，且專案已使用 package.json 和 Gruntfile 進行設定，那麼就可以很輕鬆地開始使用 Grunt

變更到專案的根目錄。
使用 npm install 安裝專案相依性。
使用 grunt 執行 Grunt。

這就完成了所有步驟。可以透過執行 grunt --help 來列出已安裝的 Grunt 任務，但通常建議先從專案文件開始閱讀。

準備新的 Grunt 專案

典型的設定會包含將兩個檔案新增到專案中：package.json 和 Gruntfile。

package.json：此檔案由 npm 使用，用於儲存已發佈為 npm 模組的專案的元資料。您會將 grunt 和專案所需的 Grunt 外掛程式列為此檔案中的 devDependencies。

Gruntfile：此檔案命名為 Gruntfile.js 或 Gruntfile.coffee，用於設定或定義任務，以及載入 Grunt 外掛程式。當此文件提到 Gruntfile 時，它指的是一個檔案，可能是 Gruntfile.js 或 Gruntfile.coffee。

package.json

package.json 檔案屬於專案的根目錄，與 Gruntfile 並列，且應與專案原始程式碼一起提交。在與 package.json 檔案相同的資料夾中執行 npm install，將會安裝其中列出的每個相依性的正確版本。

有幾種方法可以為專案建立 package.json 檔案

大多數 grunt-init 範本會自動建立專案特定的 package.json 檔案。
npm init 指令會建立基本的 package.json 檔案。
從以下範例開始，並根據需要擴充，遵循此規格。

{
  "name": "my-project-name",
  "version": "0.1.0",
  "devDependencies": {
    "grunt": "~0.4.5",
    "grunt-contrib-jshint": "~0.10.0",
    "grunt-contrib-nodeunit": "~0.4.1",
    "grunt-contrib-uglify": "~0.5.0"
  }
}

安裝 Grunt 和 gruntplugins

將 Grunt 和 gruntplugins 新增到現有的 package.json 的最簡單方法是使用指令 npm install <module> --save-dev。這不僅會在本地端安裝 <module>，而且會自動將其新增到 devDependencies 區段，使用範圍版本。

例如，這將會在您的專案資料夾安裝最新版本的 Grunt，並將其新增至您的 devDependencies

npm install grunt --save-dev

對 gruntplugins 和其他節點模組也可以執行相同的動作。如下面的範例，安裝 JSHint 任務模組

npm install grunt-contrib-jshint --save-dev

在外掛程式頁面查看目前可用的 gruntplugins，以便安裝並用於您的專案。

完成後，請務必提交更新後的 package.json 檔案與您的專案！

Gruntfile

Gruntfile.js 或 Gruntfile.coffee 檔案是有效的 JavaScript 或 CoffeeScript 檔案，屬於專案根目錄的一部分，位於 package.json 檔案旁邊，且應與專案原始碼一起提交。

Gruntfile 包含下列部分

「包裝函式」
專案和任務設定
載入 Grunt 外掛程式和任務
自訂任務

Gruntfile 範例

在下列 Gruntfile 中，專案的 meta 資料會從專案的 package.json 檔案匯入到 Grunt 設定中，而 grunt-contrib-uglify 外掛程式的 uglify 任務則設定為縮小原始檔並使用該 meta 資料動態產生標題註解。當在命令列中執行 grunt 時，uglify 任務會預設執行。

module.exports = function(grunt) {

  // Project configuration.
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    uglify: {
      options: {
        banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
      },
      build: {
        src: 'src/<%= pkg.name %>.js',
        dest: 'build/<%= pkg.name %>.min.js'
      }
    }
  });

  // Load the plugin that provides the "uglify" task.
  grunt.loadNpmTasks('grunt-contrib-uglify');

  // Default task(s).
  grunt.registerTask('default', ['uglify']);

};

現在您已經看過整個 Gruntfile，讓我們來看看它的組成部分。

「包裝函式」

每個 Gruntfile（和 gruntplugin）都使用這個基本格式，而所有 Grunt 程式碼都必須指定在此函式內

module.exports = function(grunt) {
  // Do grunt-related things in here
};

專案和任務設定

大部分的 Grunt 任務仰賴傳遞給 grunt.initConfig 方法的物件中定義的設定資料。

在此範例中，grunt.file.readJSON('package.json') 會將儲存在 package.json 中的 JSON meta 資料匯入到 grunt 設定中。由於 <% %> 範本字串可以參考任何設定屬性，因此可以透過這種方式指定設定資料（例如檔案路徑和檔案清單），以減少重複。

您可以在設定物件中儲存任何任意資料，只要它不會與任務所需的屬性衝突，否則將會被忽略。此外，由於這是 JavaScript，因此您不限於 JSON；您可以在這裡使用任何有效的 JS。必要時，您甚至可以以程式方式產生設定。

與大部分任務一樣，grunt-contrib-uglify 外掛程式的 uglify 任務預期其設定會指定在同名的屬性中。在此，banner 選項已指定，並搭配一個名為 build 的單一 uglify 目標，將單一原始檔縮小為單一目標檔。

// Project configuration.
grunt.initConfig({
  pkg: grunt.file.readJSON('package.json'),
  uglify: {
    options: {
      banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
    },
    build: {
      src: 'src/<%= pkg.name %>.js',
      dest: 'build/<%= pkg.name %>.min.js'
    }
  }
});

載入 Grunt 外掛程式和任務

許多常用的任務，例如串接、縮小和程式碼檢查，都可用作 grunt 外掛程式。只要外掛程式已在 package.json 中指定為相依性，並已透過 npm install 安裝，就可以使用簡單的命令在 Gruntfile 中啟用它

// Load the plugin that provides the "uglify" task.
grunt.loadNpmTasks('grunt-contrib-uglify');

注意：grunt --help 命令會列出所有可用的工作。

自訂工作

您可以透過定義 default 工作來設定 Grunt 預設執行一個或多個工作。在以下範例中，在命令列執行 grunt 而未指定工作時，會執行 uglify 工作。這在功能上與明確執行 grunt uglify 或甚至 grunt default 相同。陣列中可以指定任意數量的任務（有或沒有參數）。

// Default task(s).
grunt.registerTask('default', ['uglify']);

如果您的專案需要 Grunt 外掛程式未提供的任務，您可以在 Gruntfile 內部定義自訂任務。例如，這個 Gruntfile 定義了一個完全自訂的 default 任務，甚至不使用任務設定

module.exports = function(grunt) {

  // A very basic default task.
  grunt.registerTask('default', 'Log some stuff.', function() {
    grunt.log.write('Logging some stuff...').ok();
  });

};

不需要在 Gruntfile 中定義自訂專案特定任務；它們可以在外部 .js 檔案中定義，並透過 grunt.loadTasks 方法載入。

進一步閱讀

安裝 grunt 指南有關於安裝特定、製作或開發中版本的 Grunt 和 grunt-cli 的詳細資訊。
設定工作指南深入說明如何在 Gruntfile 內設定工作、目標、選項和檔案，並說明範本、全域比對模式和匯入外部資料。
建立工作指南列出 Grunt 工作類型之間的差異，並顯示許多範例工作和設定。
如需關於撰寫自訂工作或 Grunt 外掛程式的更多資訊，請查看開發人員文件。

在文件中發現錯誤？提交問題。