關於Grunt

簡介

Q：Grunt爲什麼物？

A：一個專爲JavaScript提供的構建工具。

Q：啥是構建工具？

A：在項目部署上線前，一般要將源文件壓縮，合併，並拷貝到bch或trunk中。
在將js模塊化後，又多了一個分析，提取業務代碼中所依賴模塊的工做。
解決這一系列繁重工做的自動化工具，稱之爲構建工具。

Q：grunt是如何工做的？

A：剛剛接觸grunt，舉個例子可能不太恰當，但應該可讓你先比較準確的認識她。
就好像一個萬能工廠（grunt），只負責執行任務（Task），不關心每一個任務到底都幹了什麼。
這些任務好比：

• clean:刪除臨時文件

• uglify:壓縮

• qunit:測試

• concat:合併

任務流程多是這樣的：

• task:clean

• task:uglify

• task:qunit

• task:concat

安裝

前提是你已經安裝了nodejs和npm。 你能夠在 nodejs.org 下載安裝包安裝，也能夠經過包管理器（好比在 Mac 上用 homebrew，同時推薦在 Mac 上用 homebrew）。

安裝grunt CLI

npm install -g grunt-cli

按照官方的說法，grunt-cli只是爲了在同一臺機器上安裝不一樣的grunt版本，那麼我們先不去管他。

在項目中使用grunt

首先須要往項目裏添加兩個文件：package.json和Gruntfile.js

• package.json:該文件用來爲npm存放項目配置的元數據，與grunt關係最大的配置在devDependencies中。

"devDependencies": {
        "grunt": "~0.4.1",
        "grunt-cmd-transport": "~0.2.0",
        "grunt-cmd-concat": "~0.2.0",
        "grunt-contrib-uglify": "~0.2.0",
        "grunt-contrib-clean": "~0.4.0"
    }

• Gruntfile.js:注意G的大寫，這個文件就是grunt的配置了，其中詳細定義了每一個任務的細節和執行任務的順序等。

安裝grunt

在命令行進入項目所在目錄，鍵入以下命令便可，npm會根據devDependencies中的配置，將須要的grunt及其插件下載到你的項目目錄中。

npm install grunt --save-dev

傳說中簡單的配置T-T

終於到了簡單配置環節，就從Gruntfile.js入手，一點點的認識grunt。

一個幾乎是Gruntfile.js通用的寫法：

module.exports = function(grunt) {
      grunt.initConfig({
        pkg: grunt.file.readJSON('package.json');
      });
    };

因爲篇幅關係，這裏只簡單說下。grunt配置的主體都在grunt.initConfig中

pkg: grunt.file.readJSON('package.json')是爲了之後在其它任務（task）中方便讀取package.json已經定義好的值。

下面咱們來了解下任務（task）：

transport: {
            dialog: {
                files : [
                    {
                        src : '*',
                        dest : '.build/styles/component/dialog/src'
                    }
                ]
            }
        }

transport就是一個任務（task），她是此次spm2所提供的一系列grunt構建插件的其中一個，該插件主要負責提取模塊中的依賴，
併爲每一個模塊設置模塊ID。dialog是任務的其中一個目標（Target），files中定義了要對哪些文件執行該任務（src），
以及執行任務後，生成的文件放在什麼地方(dest)。

下一個任務是合併(concat)：

concat: {
            dialog: {
                files: {
                    "dist/styles/component/dialog/src/dialog.js": [".build/styles/component/dialog/src/dialog.js"]
                }
            }
        }

concat的內容是合併依賴的模塊，有不少須要設置的地方，由於本文檔目的只是介紹grunt，
因此這裏簡單說，該配置採用了另一種src和dest的寫法。相信你們只要理解了任務（task）和目標（target）後應該很好理解。

最後，加載grunt須要的插件：

grunt.loadNpmTasks('grunt-cmd-transport');
    grunt.loadNpmTasks('grunt-cmd-concat');

還要告訴grunt該怎麼執行這些任務：

grunt.registerTask('build', ['transport', 'concat']);

完整的Gruntfile.js：

module.exports = function(grunt) {
          grunt.initConfig({
            pkg: grunt.file.readJSON('package.json'),

            transport: {
                        dialog: {
                            files : [
                                {
                                    src : '*',
                                    dest : '.build/styles/component/dialog/src'
                                }
                            ]
                        }
                    },
            concat: {
                        dialog: {
                            files: {
                                "dist/styles/component/dialog/src/dialog.js": [".build/styles/component/dialog/src/dialog.js"]
                            }
                        }
                    }
          });

          grunt.loadNpmTasks('grunt-cmd-transport');
          grunt.loadNpmTasks('grunt-cmd-concat');

          grunt.registerTask('build', ['transport', 'concat']);
        };

最後的最後，進入項目所在目錄，命令行輸入：

grunt build

一切順利的話，你就能夠看到變化了！