grunt快速入門

標籤：bsd   oda   mini   pen   keyword   default   code   配置   指令   

快速入門

Grunt和 Grunt 外掛程式是通過 npm 安裝並管理的，npm是 Node.js 的包管理器。

Grunt 0.4.x 必須配合Node.js >= 0.8.0版本使用。；奇數版本號碼的 Node.js 被認為是不穩定的開發版。

在安裝 Grunt 前，請確保當前環境中所安裝的 npm 已經是最新版本，執行 npm update -g 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。

這樣就能讓多個版本的 Grunt 同時安裝在同一台機器上。

CLI 是如何工作的

每次運行grunt 時，他就利用node提供的require()系統尋找本地安裝的 Grunt。正是由於這一機制，你可以在項目的任意子目錄中運行grunt 。

如果找到一份本地安裝的 Grunt，CLI就將其載入，並傳遞Gruntfile中的配置資訊，然後執行你所指定的任務。為了更好的理解 Grunt CLI的執行原理，請閱讀源碼。

拿一份現有的 Grunt 項目練手

假定Grunt CLI已經正確安裝，並且已經有一份配置好package.json 和 Gruntfile 檔案的項目了，接下來就很容易拿Grunt練手了：

1. 將命令列的目前的目錄轉到項目的根目錄下。
2. 執行npm install命令安裝項目依賴的庫。
3. 執行 grunt 命令。

OK，就是這麼簡單。還可以通過grunt --help 命令列出所有已安裝的Grunt任務（task），但是一般更建議去查看項目的文檔以擷取協助資訊。

準備一份新的 Grunt 項目

一般需要在你的項目中添加兩份檔案：package.json 和 Gruntfile。

package.json: 此檔案被npm用於儲存項目的中繼資料，以便將此項目發布為npm模組。你可以在此檔案中列出項目依賴的grunt和Grunt外掛程式，放置於devDependencies配置段內。

Gruntfile: 此檔案被命名為 Gruntfile.js 或 Gruntfile.coffee，用來配置或定義任務（task）並載入Grunt外掛程式的。 此文檔中提到的 Gruntfile 其實說的是一個檔案，檔案名稱是 Gruntfile.js 或Gruntfile.coffee。

package.json

package.json應當放置於項目的根目錄中，與Gruntfile在同一目錄中，並且應該與項目的原始碼一起被提交。在上述目錄(package.json所在目錄)中運行npm install將依據package.json檔案中所列出的每個依賴來自動安裝適當版本的依賴。

下面列出了幾種為你的項目建立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 和 grunt外掛程式

向已經存在的package.json 檔案中添加Grunt和grunt外掛程式的最簡單方式是通過npm install <module> --save-dev命令。此命令不光安裝了<module>，還會自動將其添加到devDependencies 配置段中，遵循tilde version range格式。

例如，下面這條命令將安裝Grunt最新版本到項目目錄中，並將其添加到devDependencies內：

npm install grunt --save-dev

同樣，grunt外掛程式和其它node模組都可以按相同的方式安裝。下面展示的執行個體就是安裝 JSHint 任務模組：

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

在 Grunt 外掛程式 頁面可以看到當前可用的 Grunt 外掛程式，他們可以直接在項目中安裝並使用。

安裝外掛程式之後，請務必確保將更新之後的 package.json 檔案提交到項目倉庫中。

Gruntfile

Gruntfile.js 或 Gruntfile.coffee 檔案是有效 JavaScript 或 CoffeeScript 檔案，應當放在你的項目根目錄中，和package.json檔案在同一目錄層級，並和項目源碼一起加入源碼管理器。

Gruntfile由以下幾部分構成：

• "wrapper" 函數
• 項目與任務配置
• 載入grunt外掛程式和任務
• 自訂任務

Gruntfile檔案案例

在下面列出的這個 Gruntfile 中，package.json檔案中的項目中繼資料（metadata）被匯入到 Grunt 配置中， grunt-contrib-uglify 外掛程式中的uglify 任務（task）被配置為壓縮（minify）源碼檔案並依據上述中繼資料動態產生一個檔案頭注釋。當在命令列中執行 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‘ } } }); // 載入包含 "uglify" 任務的外掛程式。 grunt.loadNpmTasks(‘grunt-contrib-uglify‘); // 預設被執行的工作清單。 grunt.registerTask(‘default‘, [‘uglify‘]);};

前面已經向你展示了整個 Gruntfile，接下來將詳細解釋其中的每一部分。

"wrapper" 函數

每一份 Gruntfile （和grunt外掛程式）都遵循同樣的格式，你所書寫的Grunt代碼必須放在此函數內：

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

項目和任務配置

大部分的Grunt任務都依賴某些配置資料，這些資料被定義在一個object內，並傳遞給grunt.initConfig 方法。

在下面的案例中，grunt.file.readJSON(‘package.json‘) 將儲存在package.json檔案中的JSON中繼資料引入到grunt config中。 由於<% %>模板字串可以引用任意的配置屬性，因此可以通過這種方式來指定諸如檔案路徑和檔案清單類型的配置資料，從而減少一些重複的工作。

你可以在這個設定物件中(傳遞給initConfig()方法的對象)儲存任意的資料，只要它不與你任務配置所需的屬性衝突，否則會被忽略。此外，由於這本身就是JavaScript，你不僅限於使用JSON；你可以在這裡使用任意的有效JS代碼。如果有必要，你甚至可以以編程的方式組建組態。

與大多數task一樣，grunt-contrib-uglify 外掛程式中的uglify 任務要求它的配置被指定在一個同名屬性中。在這裡有一個例子, 我們指定了一個banner選項(用於在檔案頂部產生一個注釋)，緊接著是一個單一的名為build的uglify目標，用於將一個js檔案壓縮為一個目標檔案。

// 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 外掛程式和任務

像 concatenation、[minification]、grunt-contrib-uglify 和 linting這些常用的任務（task）都已經以grunt外掛程式的形式被開發出來了。只要在 package.json 檔案中被列為dependency（依賴）的包，並通過npm install安裝之後，都可以在Gruntfile中以簡單命令的形式使用：

// 載入能夠提供"uglify"任務的外掛程式。grunt.loadNpmTasks(‘grunt-contrib-uglify‘);

注意： grunt --help 命令將列出所有可用的任務。

自訂任務

通過定義 default 任務，可以讓Grunt預設執行一個或多個任務。在下面的這個案例中，執行 grunt 命令時如果不指定一個任務的話，將會執行uglify任務。這和執行grunt uglify 或者 grunt default的效果一樣。default工作清單數組中可以指定任意數目的任務（可以帶參數）。

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

如果Grunt外掛程式中的任務（task）不能滿足你的項目需求，你還可以在Gruntfile中自訂任務（task）。例如，在下面的 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快速入門