Grunt 學習筆記【1】----基礎知識

題記：雖然如今你們都在推Webpack，無奈業務須要，所以研究下Grunt。

說明：本文是基於Grunt 0.4.5版本。

一 說明

爲什麼要用構建工具？

一句話：自動化。對於須要反覆重複的任務，例如壓縮（minification）、編譯、單元測試、linting等，自動化工具能夠減輕你的勞動，簡化你的工做。當你在 Gruntfile 文件正確配置好了任務，任務運行器就會自動幫你或你的小組完成大部分無聊的工做。

爲何要使用grunt?

Grunt 生態系統很是龐大，而且一直在增加。因爲擁有數量龐大的插件可供選擇，所以，你能夠利用 Grunt 自動完成任何事，而且花費最少的代價。若是找不到你所須要的插件，那就本身動手創造一個 Grunt 插件，而後將其發佈到 npm 上吧。先看看入門文檔吧。

二 快速入門

官網地址：https://www.gruntjs.net/getting-started

直接看官網就能夠了。但涉及的知識點以下：

2.1 CLI

Grunt命令行工具CLI。

做用：將其全局安裝後，每次運行grunt 時，他就利用node提供的require()系統查找本地安裝的 Grunt。正是因爲這一機制，你能夠在項目的任意子目錄中運行grunt 。若是找到一份本地安裝的 Grunt，CLI就將其加載，並傳遞Gruntfile中的配置信息，而後執行你所指定的任務。爲了更好的理解 Grunt CLI的執行原理，請閱讀源碼。

npm install -g grunt-cli

注意：安裝grunt-cli並不等於安裝了 Grunt！Grunt CLI的任務很簡單：調用與Gruntfile在同一目錄中 Grunt。這樣帶來的好處是，容許你在同一個系統上同時安裝多個版本的 Grunt。

2.2 建立一個簡單的Grunt項目

1）package.json

此文件被npm用於存儲項目的元數據，以便將此項目發佈爲npm模塊。你能夠在此文件中列出項目依賴的grunt和Grunt插件，放置於devDependencies配置段內。

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

下面列出了幾種爲你的項目建立package.json文件的方式：

• 大部分 grunt-init 模版都會自動建立特定於項目的package.json文件。

• npm init命令會建立一個基本的package.json文件。

• 複製下面的案例，並根據須要作擴充，參考此說明.

 1 {
 2   "name": "my-project-name",
 3   "version": "0.1.0",
 4   "devDependencies": {
 5     "grunt": "~0.4.5",
 6     "grunt-contrib-jshint": "~0.10.0",
 7     "grunt-contrib-nodeunit": "~0.4.1",
 8     "grunt-contrib-uglify": "~0.5.0"
 9   }
10 }

 配置好package.json文件後，執行npm install。

2） Gruntfile

此文件被命名爲 Gruntfile.js 或 Gruntfile.coffee，用來配置或定義任務（task）並加載Grunt插件的。 此文檔中提到的 Gruntfile 其實說的是一個文件，文件名是 Gruntfile.js 或 Gruntfile.coffee。

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

 1 module.exports = function(grunt) {
 2 
 3   // Project configuration.
 4   grunt.initConfig({
 5     pkg: grunt.file.readJSON('package.json'),
 6     uglify: {
 7       options: {
 8         banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
 9       },
10       build: {
11         src: 'src/<%= pkg.name %>.js',
12         dest: 'build/<%= pkg.name %>.min.js'
13       }
14     }
15   });
16 
17   // 加載包含 "uglify" 任務的插件。
18   grunt.loadNpmTasks('grunt-contrib-uglify');
19 
20   // 默認被執行的任務列表。
21   grunt.registerTask('default', ['uglify']);
22 
23 };

Gruntfile由如下幾部分構成：

• "wrapper" 函數

• 項目與任務配置

• 加載grunt插件和任務

• 自定義任務

"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文件壓縮爲一個目標文件。

 1 // Project configuration.
 2 grunt.initConfig({
 3   pkg: grunt.file.readJSON('package.json'),
 4   uglify: {
 5     options: {
 6       banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
 7     },
 8     build: {
 9       src: 'src/<%= pkg.name %>.js',
10       dest: 'build/<%= pkg.name %>.min.js'
11     }
12   }
13 });

加載 Grunt 插件和任務

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

1 // 加載可以提供"uglify"任務的插件。
2 grunt.loadNpmTasks('grunt-contrib-uglify');

自定義任務

經過定義 default 任務，可讓Grunt默認執行一個或多個任務。在下面的這個案例中，執行 grunt 命令時若是不指定一個任務的話，將會執行uglify任務。這和執行grunt uglify 或者 grunt default的效果同樣。default任務列表數組中能夠指定任意數目的任務（能夠帶參數）。

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

若是Grunt插件中的任務（task）不能知足你的項目需求，你還能夠在Gruntfile中自定義任務（task）。例如，在下面的 Gruntfile 中自定義了一個default 任務，而且他甚至不依賴任務配置：

1 module.exports = function(grunt) {
2   // A very basic default task.
3   grunt.registerTask('default', 'Log some stuff.', function() {
4     grunt.log.write('Logging some stuff...').ok();
5   });
6 
7 };

特定於項目的任務沒必要在 Gruntfile 中定義。他們能夠定義在外部.js 文件中，並經過grunt.loadTasks方法加載。

參考資料&內容來源：

Grunt官網：https://www.gruntjs.net/