Grunt的配置和使用(一)

Grunt的配置和使用(一)

Grunt 和 Grunt 的插件都是經過 Node.js 的包管理器 npm 來安裝和管理的。爲了方便使用 Grunt ，你應該在全局範圍內安裝 Grunt 的命令行接口(CLI)。要作到這一點，你可能須要使用 sudo (OS X，*nix，BSD 等平臺中)權限或者做爲超級管理員( Windows 平臺)來運行 shell 命令。

npm install -g grunt-cli

使用全局安裝以後，能夠在任何一個目錄中運行 grunt 命令。

如何工做

每次運行 grunt 時，它都會使用 node 的 require() 系統查找本地已安裝好的 grunt。在本地裝好 Grunt 以後，運行 gurnt 命令時，CLI 就會加載這個本地安裝好的 Grunt 庫，而後應用你項目中的 Gruntfile 中的配置(這個文件用於配置項目中使用的任務)，並執行你所指定的全部任務。而 Grunt 庫的安裝則依賴 package.json 文件。

假設已經安裝好 Grunt CLI 而且項目也已經使用一個 package.json 和一個 Gruntfile 文件配置好了，那麼接下來用 Grunt 進行工做就很是容易了：

1. 進入到項目的根目錄(在命令行面板定位到項目根目錄。在 windows 系統下，也能夠進入項目根目錄的文件夾後，按Shift+鼠標右鍵，打開右鍵菜單，選擇「在此處打開命令窗口(W)」)。
2. 運行 npm install 安裝項目相關依賴(插件，Grunt 內置任務等依賴)。
3. 使用 grunt (命令)運行 Grunt。

構建一個新的 Grunt 項目

最簡單的配置須要兩個文件：package.json 和 Gruntfile

package.json：這個文件被用來存儲已經做爲 npm 模塊發佈的項目元數據(也就是依賴模塊)。你將在這個文件中列出你的項目所依賴的Grunt(一般咱們在這裏配置Grunt版本)和Grunt插件(相應版本的插件)。使用命令 npm install 安裝依賴模塊。

Gruntfile：一般這個文件被命名爲Gruntfile.js或者Gruntfile.coffee，它用於配置或者定義Grunt任務和加載Grunt插件。

package.json

package.json 與 Gruntfile 相鄰，都歸屬在項目的根目錄中。在目錄中運行 npm install 安裝須要的依賴模塊。其建立方式有幾種：

1. grunt-init 命令建立 Grunt 模板時，會自動爲項目建立一個 package.json 文件。
2. npm init 會自動建立一個基本的 package.json 文件。
3. 新建一個文件，重命名爲 package.json。

一個 package.json 文件示例：

{
    "name": "my-project-name", // 項目名稱
    "version": "0.1.0", // 項目版本
    "devDependencies": { // 項目依賴
        "grunt": "~0.4.1", // Grunt庫
        "grunt-contrib-jshint": "~0.6.0", //grunt中的工具
        "grunt-contrib-nodeunit": "~0.2.0", //grunt中的工具
        "grunt-contrib-uglify": "~0.2.2" //grunt中的工具，能夠按照這種方式在 dependencies 中添加本身想要的工具
    }
}

Gruntfile

Gruntfile.js 和 Gruntfile.coffee 文件都是歸屬於項目根目錄中的一個有效的 JavaScript 或者 CoffeeScript 文件。
一個 Gruntfile 由下面幾部分組成：

• 「wrapper」 函數，一個包裝函數
• 項目和任務配置
• 加載的 Grunt 插件和任務
• 自定義任務

wrapper 函數

每一個 Gruntfile 都使用這個基本格式，同時全部的 Grunt 戴瑪都必須指點在這個函數裏面：

module.exports=function(){
    //在這裏添加 Grunt 相關
}

項目和任務配置

一般 Grunt 任務所依賴的配置素據都被定義在一個對象中，而這個對象將會被傳遞給 grunt.initConfig 方法。

// 項目配置
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.file.readJSON('package.json') 會把存儲在 package.json 中的 JSON 元數據導入到 Grunt 配置中。因爲 <% %> 模板字符串能夠引用任意的配置屬性，所以能夠經過這種方式來制定諸如文件路徑和文件列表類型的配置數據。

與大多數的任務同樣， grunt-contrib-uglify 插件的 uglify 任務要求他的配置被指定在一個同名屬性中。在這個例子中，咱們指定了一個 banner 選項，用於在文件頂部生成一個註釋。緊接着是一個名爲 build 的 uglify 目標，用於將一個js文件壓縮爲一個目標文件，好比：將 src 目錄中的 jQuery-1.9.0.js 壓縮成 jQuery-1.9.0.min.js，而後存儲到 dest 目錄中。
插件通常都託管在 github 上，其使用方法都會有說明。好比 grunt-contrib-uglify

加載 grunt 插件和任務

只要一個插件被做爲一個依賴指定在項目的 package.json 文件中，而且經過 npm install 安裝好，均可以在 Gruntfile 文件中使用下面的簡單命令啓用.

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

tips: 使用 grunt --help 命令能夠列出全部可用的任務

同時，你能夠經過定義一個 default 任務來配置 Grunt，讓他默認運行一個過着多個任務。

// 默認任務
grunt.registerTask('default', ['uglify']);

能夠將你容許默認運行的任務名稱以數組的形式做爲參數傳遞。

若是你想要的任務沒有對應的 Grunt 插件提供相應的功能，你能夠在 Gruntfile 內定義自定義的任務：

module.exports=function(){
    //一個很基礎的default任務
    grunt.registerTask("default","load some stuff.",function(){
        grunt.log.write("Loggin some stuff……").ok();
    });
};

自定義的項目特定的任務能夠不定義在 Gruntfile 中；它們能夠定義在一個外部 .js 文件中，而後經過 grunt.loadTasks 方法來加載。

參考自：Grunt新手教程