Grunt快速入門

快速入門

Grunt和 Grunt 插件是經過 npm 安裝並管理的，npm是 Node.js 的包管理器。

Grunt 0.4.x 必須配合 Node.js >= 0.8.0 版本使用。

在安裝 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方法加載。