Grunt - 安裝

本章提供在您的系統上安裝 Grunt 的分步過程。

Grunt 的系統要求

作業系統 − 跨平臺
瀏覽器支援 − IE (Internet Explorer 8+), Firefox, Google Chrome, Safari, Opera

Grunt 的安裝

步驟 1 − 我們需要 NodeJs 來執行 Grunt。要下載 NodeJs，請開啟連結 https://nodejs.com.tw/en/，您將看到如下所示的螢幕：

下載最新版本的 zip 檔案。

步驟 2 − 接下來，執行安裝程式以在您的計算機上安裝 NodeJs。

步驟 3 − 接下來，您需要設定環境變數。

使用者變數路徑

右鍵單擊我的電腦。
選擇屬性。
接下來，選擇高階選項卡，然後單擊環境變數。

在環境變數視窗下，雙擊PATH，如螢幕所示。

您將獲得一個編輯使用者變數視窗，如圖所示。在變數值欄位中新增 NodeJs 資料夾路徑，例如C:\Program Files\nodejs\node_modules\npm。如果已為其他檔案設定了路徑，則需要在其後新增分號 (;)，然後新增 NodeJs 路徑，如下所示：

最後，單擊確定按鈕。

系統變數

在系統變數下，雙擊Path，如以下螢幕所示。

您將獲得一個編輯系統變數視窗，如圖所示。在變數值欄位中新增 NodeJs 資料夾路徑，例如C:\Program Files\nodejs\，然後單擊確定，如下所示：

步驟 4 − 要在您的系統上安裝 grunt，您需要全域性安裝 Grunt 的命令列介面 (CLI)，如下所示：

npm install -g grunt-cli

執行上述命令會將grunt命令放入您的系統路徑中，使其能夠從任何目錄執行。

安裝grunt-cli不會安裝 Grunt 任務執行器。grunt-cli 的作用是執行已安裝在Gruntfile旁邊的 Grunt 版本。它允許一臺機器同時安裝多個版本的 Grunt。

步驟 5 − 現在，我們將建立配置檔案以執行 Grunt。

package.json

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

可以透過在命令提示符中鍵入以下命令來建立基本的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 外掛新增到現有的package.json檔案中：

npm install <module> --save-dev

在上述命令中，<module> 表示要本地安裝的模組。上述命令還會自動將<module>新增到devDependencies。

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

npm install grunt --save-dev

Gruntfile.js

Gruntfile.js檔案用於定義我們的 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
      uglify: {
         // uglify task configuration
         options: {},
         build: {}
      }
   });

   // log something
   grunt.log.write('Hello world! Welcome to Tutorialspoint!!\n');

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

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

列印頁面