注意，安裝grunt-cli并不等于安裝了grunt任務(wù)運(yùn)行器！Grunt CLI的工作很簡單：在Gruntfile所在目錄調(diào)用運(yùn)行已經(jīng)安裝好的相應(yīng)版本的Grunt。這就意味著可以在同一臺機(jī)器上同時(shí)安裝多個(gè)版本的Grunt。

CLI如何工作

每次運(yùn)行grunt時(shí)，它都會使用node的require()系統(tǒng)查找本地已安裝好的grunt。正因?yàn)槿绱?，你可以從你?xiàng)目的任意子目錄運(yùn)行grunt。

如果找到本地已經(jīng)安裝好的Grunt，CLI就會加載這個(gè)本地安裝好的Grunt庫，然后應(yīng)用你項(xiàng)目中的Gruntfile中的配置(這個(gè)文件用于配置項(xiàng)目中使用的任務(wù)，Grunt也正是根據(jù)這個(gè)文件中的配置來處理相應(yīng)的任務(wù))，并執(zhí)行你所指定的所有任務(wù)。

想要真正的了解這里發(fā)生了什么，可以閱讀源碼。這份代碼很短。

用一個(gè)現(xiàn)有的Grunt項(xiàng)目進(jìn)行工作

假設(shè)已經(jīng)安裝好Grunt CLI并且項(xiàng)目也已經(jīng)使用一個(gè)package.json和一個(gè)Gruntfile文件配置好了，那么接下來用Grunt進(jìn)行工作就非常容易了：

進(jìn)入到項(xiàng)目的根目錄(在命令行面板定位到項(xiàng)目根目錄。在windows系統(tǒng)下，也可以進(jìn)入項(xiàng)目根目錄的文件夾后，按Shift+鼠標(biāo)右鍵，打開右鍵菜單，選擇“在此處打開命令窗口(W)”)。
運(yùn)行npm install安裝項(xiàng)目相關(guān)依賴(插件，Grunt內(nèi)置任務(wù)等依賴)。
使用grunt(命令)運(yùn)行Grunt。

就是這么簡單。已經(jīng)安裝的Grunt任務(wù)可以通過運(yùn)行grunt --help列出來，但是通常最好還是先查看一下項(xiàng)目的文檔。

準(zhǔn)備一個(gè)新的Grunt項(xiàng)目

一個(gè)典型的配置過程通常只涉及到兩個(gè)文件：package.json和Gruntfile。

package.json：這個(gè)文件被用來存儲已經(jīng)作為npm模塊發(fā)布的項(xiàng)目元數(shù)據(jù)(也就是依賴模塊)。你將在這個(gè)文件中列出你的項(xiàng)目所依賴的Grunt(通常我們在這里配置Grunt版本)和Grunt插件(相應(yīng)版本的插件)。

Gruntfile：通常這個(gè)文件被命名為Gruntfile.js或者Gruntfile.coffee，它用于配置或者定義Grunt任務(wù)和加載Grunt插件。

package.json

package.json與Gruntfile相鄰，它們都應(yīng)該歸屬于項(xiàng)目的根目錄中，并且應(yīng)該與項(xiàng)目的源代碼一起被提交。在上述目錄(package.json所在目錄)中運(yùn)行npm install將依據(jù)package.json文件中所列出的每個(gè)依賴來自動安裝適當(dāng)版本的依賴。

這里有一些為項(xiàng)目創(chuàng)建package.json文件的方式：

大多數(shù)的grunt-init模板都會自動創(chuàng)建一個(gè)項(xiàng)目特定的package.json文件。
npm init 命令會自動創(chuàng)建一個(gè)基本的package.json文件。
從下面的例子開始并根據(jù)規(guī)范來按需擴(kuò)展。

{ "name": "my-project-name", // 項(xiàng)目名稱 "version": "0.1.0", // 項(xiàng)目版本 "devDependencies": { // 項(xiàng)目依賴 "grunt": "~0.4.1", // Grunt庫 "grunt-contrib-jshint": "~0.6.0", //以下三個(gè)是Grunt內(nèi)置任務(wù) "grunt-contrib-nodeunit": "~0.2.0", "grunt-contrib-uglify": "~0.2.2" } }

原文中注釋僅作說明，使用時(shí)請自行檢查編輯。其他地方如有雷同，參考這條提示。

安裝Grunt和grunt插件

添加Grunt和Grunt插件到一個(gè)現(xiàn)有的package.json中最簡單的方式就是使用npm install <module> --save-dev命令。這不僅會在本地安裝<module>，它還會使用一個(gè)波浪形字符的版本范圍自動將所安裝的<module>添加到項(xiàng)目依賴中。

例如使用下面的命令將會安裝最新版的Grunt到你的項(xiàng)目中，并自動將它添加到你的項(xiàng)目依賴中：

npm install grunt --save-dev

上述命令也可以用于Grunt插件和其他的node模塊的安裝。當(dāng)完成操作后請確保更新后的package.json文件也要與你的項(xiàng)目一起提交。

Gruntfile

Gruntfile.js或者Gruntfile.coffee文件都是歸屬于你項(xiàng)目根目錄中的一個(gè)有效的JavaScript或者CoffeeScript文件(和package.json文件一樣都在根目錄中)，并且它(Gruntfile)也應(yīng)該與你的項(xiàng)目源文件一起提交。

一個(gè)Gruntfile由下面幾部分組成：

"wrapper"函數(shù)(包裝函數(shù))
項(xiàng)目和任務(wù)配置
加載的Grunt插件和任務(wù)
自定義任務(wù)

一個(gè)Gruntfile示例

在下面的Gruntfile中，項(xiàng)目的元數(shù)據(jù)會從項(xiàng)目的package.json文件中導(dǎo)入到grunt配置中，同時(shí)grunt-contrib-uglify插件的uglify任務(wù)被配置用于壓縮一個(gè)源文件，同時(shí)使用該元數(shù)據(jù)(導(dǎo)入的元數(shù)據(jù))動態(tài)的生成一個(gè)標(biāo)語(banner)注釋。在命令行運(yùn)行grunt時(shí)默認(rèn)會運(yùn)行uglify任務(wù)。

module.exports = function(grunt){

    // 項(xiàng)目配置
    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"任務(wù)的插件
    grunt.loadNpmTasks('grunt-contrib-uglify');

    // 默認(rèn)任務(wù)
    grunt.registerTask('default', ['uglify']);
}

現(xiàn)在你已經(jīng)看到到了一個(gè)完整的Gruntfile，下面讓我們來看看它的各個(gè)組成部分：

"wrapper"函數(shù)

每個(gè)Gruntfile(和Grunt插件)都使用這個(gè)基本格式，并且所有你的Grunt代碼都必須指定在這個(gè)函數(shù)里面：

module.exports = function(grunt) {
    // 在這里處理Grunt相關(guān)的事情
}

項(xiàng)目和任務(wù)配置

大多數(shù)Grunt任務(wù)所依賴的配置數(shù)據(jù)都被定義在傳遞給grunt.initConfig方法的一個(gè)對象中。

在這個(gè)例子中，grunt.file.readJSON('package.json')會把存儲在package.json中的JSON元數(shù)據(jù)導(dǎo)入到Grunt配置中。由于<% %>模板字符串可以引用任意的配置屬性，因此可以通過這種方式來指定諸如文件路徑和文件列表類型的配置數(shù)據(jù)，從而減少一些重復(fù)的工作(比如我們通常需要通過復(fù)制粘貼的方式來在不同的地方引用同一屬性, 使用<% %>的方式可以簡單的理解為將某些特定的數(shù)據(jù)存儲在變量中，然后在其他地方像使用變量一樣就可以使用這些數(shù)據(jù)屬性)。

你可以在這個(gè)配置對象中(傳遞給initConfig()方法的對象)存儲任意的數(shù)據(jù)，只要它不與你任務(wù)配置所需的屬性沖突，否則會被忽略。此外，由于這本身就是JavaScript，你不僅限于使用JSON；你可以在這里使用任意的有效的JS代碼。如果有必要，你甚至可以以編程的方式生成配置。

與大多數(shù)任務(wù)一樣，grunt-contrib-uglify插件的uglify任務(wù)要求它的配置被指定在一個(gè)同名屬性中。在這里有一個(gè)例子, 我們指定了一個(gè)banner選項(xiàng)(用于在文件頂部生成一個(gè)注釋)，緊接著是一個(gè)單一的名為build的uglify目標(biāo)，用于將一個(gè)js文件壓縮為一個(gè)目標(biāo)文件(比如將src目錄jquery-1.9.0.js壓縮為jquery-1.9.0.min.js然后存儲到dest目錄)。

// 項(xiàng)目配置
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插件和任務(wù)

許多常用的任務(wù)像concatenation，minification和linting都被作為grunt插件來使用。只要一個(gè)插件被作為一個(gè)依賴指定在項(xiàng)目的package.json文件中，并且已經(jīng)通過npm install安裝好，都可以在你的Gruntfile文件中使用下面這個(gè)簡單的命令啟用它(所依賴的任務(wù))。

// 加載提供"uglify"任務(wù)的插件
grunt.loadNpmTasks('grunt-contrib-uglify');

注意: grunt --help命令可以列出所有可用的任務(wù)。

自定義任務(wù)

你可以通過定義一個(gè)default任務(wù)來配置Grunt，讓它默認(rèn)運(yùn)行一個(gè)或者多個(gè)任務(wù)。在下面的例子中，在命令行中運(yùn)行grunt而不指定特定的任務(wù)將自動運(yùn)行uglify任務(wù)。這個(gè)功能與顯示的運(yùn)行grunt uglify或者等價(jià)的grunt default一樣。你可以在任務(wù)參數(shù)數(shù)組中指定任意數(shù)量的任務(wù)(這些任務(wù)可以帶參數(shù)，也可以不帶參數(shù))。

// 默認(rèn)任務(wù)
grunt.registerTask('default', ['uglify']);

如果你的項(xiàng)目所需的任務(wù)沒有對應(yīng)的Grunt插件提供相應(yīng)的功能，你可以在Gruntfile內(nèi)定義自定義的任務(wù)。例如，下面的Gruntfile就定義了一個(gè)完整的自定義的default任務(wù)，它甚至沒有利用任務(wù)配置(沒有使用grunt.initConfig()方法)：

module.exports = function(grunt) {
    // 一個(gè)非?；A(chǔ)的default任務(wù)
    grunt.registerTask('default', 'Log some stuff.', function() {
        grunt.log.write('Logging some stuff...').ok();
    });
};

自定義的項(xiàng)目特定的任務(wù)可以不定義在Gruntfile中；它們可以定義在一個(gè)外部.js文件中，然后通過grunt.loadTasks方法來加載。

擴(kuò)展閱讀

安裝Grunt指南中有關(guān)于安裝特定版本的，發(fā)布的或者開發(fā)中版本的Grunt和Grunt-cli的詳細(xì)信息。
配置任務(wù)指南中有對于如何在Gruntfile中配置任務(wù)，目標(biāo)，選項(xiàng)和文件的詳細(xì)解釋，還有模板，匹配模式和導(dǎo)入外部數(shù)據(jù)相關(guān)的說明。
創(chuàng)建任務(wù)指南列出了Grunt任務(wù)類型之間的不同，還展示了許多實(shí)例任務(wù)和配置。
對于關(guān)于編寫自定義任務(wù)或者Grunt插件的更多信息，請參考開發(fā)者文檔。

Grunt 0.3說明

如果你從Grunt 0.3升級而來的，請確保先卸載全局的grunt(使用下面的命令)：

npm uninstall -g grunt

上面這些說明文檔是針對Grunt 0.4.x編寫的，但仍然適用于Grunt 0.3.x。只是注意0.3.x版本中的插件名稱和任務(wù)配置選項(xiàng)可能與上面的"Gruntfile"中所展示的不同。

對于0.3.x版本的Grunt, Grunfile名為grunt.js。

上一篇：grunt.file下一篇：grunt.template