Grunt 系列(1) 基礎教學

Grunt 入門

GruntGrunt 擴充套件 都是透過 npm 來安裝和管理。Grunt 這個工具大概就等於 Ruby 中的 rake ,它可以透過一些設定讓你輕鬆完成一些例行性的任務,例如壓縮檔案,編譯 coffee less,搬移到目標目錄,單元測試等等。之後就可以透過一個指令,就把所有的事情做好。

安裝

為了能夠使用 Grunt 你必須安裝 grunt-cli 就是 Grunt 的 Command Line Interface 到您的系統。
安裝過程可能會需要 sudo 或這在 windows 底下使用管理者身份執行。

1
$ npm install -g grunt-cli

npm 使用 -g 就會把該套件裝至系統路徑,這樣您就可以在任何目錄使用 grunt-cli
注意:安裝了 grunt-cli 並不是安裝 Grunt task runnergrunt-cli 本身的任務非常單純,他就只是使用你已經安裝的 Grunt 版本去執行 Gruntfile.js。這樣你就可以在同一台機器,運行不同版本的 grunt 了。

CLI如何運作

每一次執行 grunt,他會用require()去引入本地的 grunt,注意不是 cli。也因次你可以在不同專案目錄底下運行不同版本的 grunt
一旦 grunt 被載入了,接著就會載入 Gruntfile 然後根據裡面的設定去運行任務。
如果你想理解原理可以閱讀程式碼 https://github.com/gruntjs/grunt-cli/blob/master/bin/grunt

如何使用已經存在的 Grunt 專案

假如您的 cli 已經安裝了,並且有一個專案也已經設定好 package.jsonGruntfile.js。那你可以非常輕鬆地就開始使用 grunt

  1. 切換到專案的根目錄
  2. 使用 npm install 安裝相依的套件。
  3. 執行 grunt 就可以開始跑了。

如果你想瞭解更多關於 grunt 的命令,你可以使用 grunt --help 會列出例如:clean, coffee。這些都是靠 Grunfile 定義的。
預設是空的沒有任何任務

Sails 建立的 Gruntfile

建立一個新的 Grunt 專案

要建立一個 Grunt 專案涉及到最重要的兩個檔案的建立 package.jsonGruntfile.js

  • package.json : 這是 npm 用來儲存 matadata 的檔案,簡單說就是 npm 對於這個專案相關的設定擋。包含相依的套件,一旦在這邊設定,您就可以透過 npm install 來安裝相依的套件。一般在使用時,我們也會用 npm install --save 在安裝後順便把設定加到 package.json。你也會在這個檔案設定 grunt 和 grunt 套件相依的一些函式庫或元件。通常會像下面程式碼片段,指的是開發階段使用的套件。

       "devDependencies": {
        "mocha": "*",
        "request": "*",
        "wrench": "~1.5.1"
        }
    
  • Gruntfile : 這個檔案通常會是 Gruntfile.js 或者 Gruntfile.coffee 他被用來設定任務,載入外掛。

package.json

package.json 通常和 Gruntfile 都在專案的根目錄。而且必須和你的專案一起被送交。在根目錄下 npm install 就會根據 package.json 去安裝相依的套件。而且還能指定版本。下面提供一些簡單的方式快速建立 package.json

  • 大部份的 grunt-init 模版都會自動建立 package.json。而 grunt-init 這個指令是需要在安裝的。

  • npm init 直接執行 npm init 就會一步一步詢問你相關的參數,協助您建立 package.json

  • 手動建立

      {
        "name": "my-project-name",
        "version": "0.1.0",
        "devDependencies": {
          "grunt": "~0.4.1",
          "grunt-contrib-jshint": "~0.6.3",
          "grunt-contrib-nodeunit": "~0.2.0",
          "grunt-contrib-uglify": "~0.2.2"
        }
      }
    

安裝 Grunt 和 Grunt 套件

安裝 Grunt 和 Grunt 套件並且加入 package.json 最簡單的方式就是執行 npm install <module> --save-dev
它不只會安裝該套件模組還會新增或更新 package.json 。
範例:

npm install grunt –save-dev
/* 測試透過 npm 安裝同一個套件,不同版本*/
npm install jquery@1.7.2 –save-dev
npm install jquery@1.8.3 –save-dev

Gruntfile

Gruntfile.jsGruntfile.coffee 都必須是合法正確的 javascript 或 coffee 。他們通常放在專案的根目錄下。跟 package.json 同一層,也一樣必須要被提交。
一個 Gruntfile 包含下面這幾個部分:

  • 把所有動作包起來的 function
  • 專案和任務的設定
  • 載入的 Grunt 套件和任務(別人已經寫好的)
  • 自訂的任務

Gruntfile 範例

在下面的範例中,關於 project 的 metadata 等資料是透過讀取 package.json 取得,並在 grunt 中使用。
使用 grunt-contrib-uglify 套件的uglify任務是用來設定壓縮檔案並根據專案的 metadata 產生一些註解。當 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 大致上就如上面這樣,後續我們將一步一步介紹每個組成部份。

The “wrapper” function (把所有動作包起來的 function)

每一個 Gruntfile 或者 Grunt 套件都使用這個基本的定義格式,而你所有要讓 Grunt 執行的程式碼都必須被包在這個 function 中。

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

專案和任務設定

絕大多數的 Grunt 任務都透過定義一個包含所有設定資料的物件,然後把物件傳給 grunt.initConfig 方法來設定的。
在上面的範例中,grunt.file.readJSON('package.json') 匯入了一個 JSON 格式的檔案,JSON 讀取至 javascript 中便是一個 object。接著在 Gruntfile 中可以使用 <% %> 這樣的語法,中間可以帶入其他設定的屬性,例如檔案路徑。
你可能會隨便存一些資料到設定裡面,只要屬性不要衝突即可,否則會被忽略。這其實也是因為在 Javascript 中,你不能去限制 JSON

就像大部份的任務,grunt-contrib-uglifyuglify 任務預計會在同名的屬性中取得設定,在下面的範例中,我們在 options 設定了 banner,然後設定了 build 裡面指定了 src 和 dest 。整段範例的意思就是取得 package.json 中的 name ,接著去 src 目錄中取得 name.js 檔案並且把它壓縮成 name.min.js 。到這邊為止的 code 都只是設定而已。

     // 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 中設定並安裝,就可以使用。
安裝完之後,就是在 Gruntfile 中載入

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

載入之後透過 grunt --help 就可以列出目前可以執行的任務,注意:initConfig 是在 grunt 初始化時針對任務做一些設定。於是真正在執行的時候就會去套用設定,例如上面我們載入了 grunt-contrib-uglify,之後我們就可以下達指令:grunt uglify。就會照著我們設定的把一支跟專案名稱一樣的 .js 壓縮成 .min.js。

自訂任務

您可以在預設就讓 grunt 執行多個任務,只要透過 default 設定,接著我們執行 grunt 的時候就會照著預設任務去執行。如下範例,我們把 uglify 註冊到 default 。這樣我們就不用特別單獨執行 grunt uglify ,只要執行 grunt 或者 grunt default 就會執行下面壓縮檔案的這個任務。需要指定的任務可以加入下面程式碼 [‘uglify’] 中的這個陣列。它可以執行多個任務。

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

不過如果你想要執行的任務或需求並沒有任何 Grunt 套件,您也可以自訂在 Gruntfile 裡面

    module.exports = function(grunt) {

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

    };

以上我們就完成了 Grunt 入門的使用了

作者

andyyou(YOU,ZONGYAN)

發表於

2013-09-27

更新於

2016-12-19

許可協議