Grunt - 入門指南

要使用 Grunt，您需要安裝 Node.js。Node.js 的安裝已在上一章中進行了說明。您可以使用 Node.js 包管理器安裝 Grunt 和 Grunt 外掛。

在系統上設定 Grunt 之前，您可以使用以下命令更新 Node 包管理器：

npm update -g npm

如果您使用的是 Mac 或 Linux，則需要在命令列開頭使用sudo 命令來授予管理員訪問許可權，如下所示：

sudo npm update -g npm

CLI 安裝

CLI 代表命令列介面，它執行已安裝的 Grunt 版本。要開始使用 Grunt，您需要全域性安裝 Grunt 的命令列介面 (CLI)，如下所示：

npm install -g grunt-cli

執行上述命令會將 grunt 命令放入您的系統路徑中，這使得它可以從任何目錄執行。您無法透過安裝grunt-cli來安裝 Grunt 任務執行器。它允許一臺機器同時安裝多個版本的 Grunt。

CLI 的工作原理

每當執行 Grunt 時，CLI 使用require() 系統在您的系統上查詢已安裝的 Grunt。使用grunt-cli，您可以從專案中的任何目錄執行 Grunt。如果您使用的是本地安裝的 Grunt，則 grunt-cli 使用本地安裝的 Grunt 庫並應用 Grunt 檔案中的配置。

處理現有和新專案

如果您正在處理包含package.json和Gruntfile的已配置專案，請按照以下說明進行操作：

找到專案根目錄的路徑。
您可以使用npm install命令安裝依賴項。
使用grunt命令執行 Grunt。

如果您正在建立新專案，請將package.json和Gruntfile這兩個檔案包含到您的專案中。

package.json - package.json 檔案放置在專案的根目錄中，用於在您在同一資料夾中執行npm install命令時執行每個列出的依賴項。
Gruntfile.js - Gruntfile.js 檔案用於編寫專案的配置設定。

package.json

package.json檔案放置在專案的根目錄中，位於Gruntfile旁邊，用於在您在同一資料夾中執行npm install命令時執行每個列出的依賴項。

您可以透過以下列出的不同方式建立package.json：

您可以使用grunt-init建立 package.json 檔案。
您也可以使用npm-init命令建立 package.json 檔案。

您可以編寫如下所示的規範：

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

您可以使用以下命令將 Grunt 和 grunt 外掛新增到現有的 pacakge.json 檔案中：

npm install <module> --save-dev

這裡，<module> 表示要本地安裝的模組。上述命令將安裝指定的模組並將其自動新增到devDependencies部分。

例如，以下命令將安裝最新版本的Grunt並將其新增到您的devDependencies中：

npm install grunt --save-dev

Gruntfile

Gruntfile.js檔案是您將為 Grunt 配置設定的預設位置。Grunt 檔案包含以下部分：

包裝器函式
專案和任務配置
載入 Grunt 外掛和任務
自定義任務

基本的Gruntfile.js檔案如下所示：

// our wrapper function (required by grunt and its plugins)
// all configuration goes inside this function
module.exports = function(grunt) {

   // CONFIGURE GRUNT
   grunt.initConfig({
      // get the configuration info from package.json file
      // this way we can use things like name and version (pkg.name)
      pkg: grunt.file.readJSON('package.json'),

      // all of our configuration goes here

   });

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

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

包裝器函式

在上面的程式碼中，module.exports是一個包裝器函式，整個配置都位於此函式內部。這是一種將配置顯示給應用程式其餘部分的方式。

module.exports = function(grunt) {
   //do grunt-related things here
}

專案和任務配置

一旦您的 Grunt 配置準備就緒，您就可以配置 Grunt 任務。專案配置可以寫在grunt.initConfig()部分。在grunt.initConfig()函式內部，從 package.json 檔案獲取配置資訊並將其儲存到pkg中。您可以使用pkg.name呼叫專案名稱，並使用pkg.version呼叫版本。

載入 Grunt 外掛和任務

使用grunt.loadNpmTasks方法從指定的外掛載入任務。您可以使用npm本地安裝外掛，並且它必須相對於 Gruntfile。您可以使用以下簡單的命令載入外掛：

grunt.task.loadNpmTasks(pluginName)

自定義任務

當您透過命令列執行 Grunt 時，Grunt 將查詢default任務。在上面的程式碼中，我們使用了一個名為uglify的任務，可以使用grunt命令執行。這與顯式執行grunt uglify命令相同，您可以在陣列中指定多個任務。

grunt.registerTask('default', ['uglify']);

列印頁面