Grunt 入門使用

grunt 好處

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

grunt 安裝

1.在開始使用grunt之前，需要安裝Grunt Command Line Interface（CLI），以便能夠全局性的在本地機器上的任何文件夾中使用grunt命令行工具。Grunt CLI 工具可以使你在不同的項目文件夾中運行不同版本的Grunt任務運行器。（以下命令只針對win和linux系統，linux系統執行一般需要sudo提升權限）。
npm install -g grunt-cli
npm參見npm具體使用 -g 安裝在本地庫。
2. Grunt CLI工具、Grunt任務運行器以及它的每個插件任務都是Node.js軟件包，部署於npm目錄。要下載Grunt任務運行器工具在具體項目中使用，請在項目所在的文件夾中執行以下命令（若文件夾中沒有package.json文件，請運行npm init 創建一個）。
npm install grunt --save-dev
參數 –save-dev 的使用會把下載的特定版本的Grunt軟件包的引用自動保存在package.json文件的devDependencies屬性下。這是爲了表明，Grunt用於開發，而不是項目本身運行所需要的軟件包。
3. 安裝插件示例。插件名稱中的“contrib”部分表示此插件是Grunt的一個官方插件。
npm install grunt-contrib-jshint --save-dev
JSHint用於對JavaScript文件的靜態代碼分析。

Grunt 任務配置

Grunt 配置通過一個配置文件實現，必須命名爲Gruntfile.js,並應該放在項目的根目錄下，即與package.json文件在同一目錄位置。

Gruntfile 是一個標準的JavaScript文件。 應該將其作爲Node.js模塊進行配置。對於要能從Gruntfile外部訪問Gruntfile內的代碼，必須將其設置在Gruntfile的module.exports 屬性內。
1. Gruntfile.js 大體結構，應該以一個包裹函數進行初始化，通過grunt參數提供對Grunt API的訪問，然後通過module.exports屬性實現公共訪問。所有的Grunt配置必須設定放在此函數體中。這裏以Grunt中配置JSHint爲例。

module.exports = function(grunt){
    //這裏是配置內容，grunt參數包含着Grunt API的方法
}

2.使用Grunt API中的initConfig()方法配置具體的插件任務。在該方法中插入的每一個JavaScript對象對應一個插件任務，對象的屬性內容是對該插件任務的配置信息。對於JSHint插件，使用屬性名稱爲jshint。瑣事多用的準確任務名稱會在所選擇的插件的文檔中進行詳細說明。有時插件設置會改動，以插件官檔最新配置爲準。JSHint 文檔

grunt.initConfig({
    jshint: {
        options: {
            strict:true,
        },
        src: ["Gruntfile.js","script/**/*.js"]
    }
});

3.在配置文件中，加載插件任務。
grunt.loadTasks("grunt-contrib-jshint")
4.管理任務列表。在執行Grunt命令時，要指定運行任務的別名（不加別名，則默認執行別名爲“default”的任務）。要簡單管理任務列表（如執行順序），可以通過定義別名任務名稱並關聯到一系列任務來實現。別名在Grungfile中使用Grunt API中的registerTask()方法進行註冊。一般在文件末尾註冊別名。
grunt.registerTask("default",["jshint",])

簡單Gruntfile.js示例。

module.exports = function(grunt){
    //這裏是配置內容，grunt參數包含着Grunt API的方法
    grunt.initConfig({
        jshint: {
            options: {
                strict:true,
            },
            src: ["Gruntfile.js","script/**/*.js"]
        }
    });
    grunt.loadTasks("grunt-contrib-jshint") ;
    grunt.registerTask("default",["jshint",])
}

運行grunt

• 運行default別名的任務：
  grunt
• 運行單獨任務或別名任務（一個或多個單獨任務的組合），直接在命名行指定任務或別名任務。
  grunt jshint 或 grunt default

擴展grunt配置

grunt 支持json數據文件導入、以可替代的配置設定來適應不同需求的多任務。如把package.json文件的內容加載至Gruntfile，把返回值設定配置對象中的pkg屬性，並把pkg插入initConfig()方法中使用。

grunt.initConfig(){
    pkg:grunt.file.readJSON("package.json");
    jshint: {
            options: {
                strict:true,
            },
            //package.json有name和version屬性
            src: ["Gruntfile.js","script/**/*.js","<%= pkg.name %>-<%= pkg.version %>.js"]
        }
};

多任務和多目標

Grunt 支持吧每一個任務的配置信息劃分至若干個單獨的配置內容中，已實現不同的任務具體配置選項，來適應不同的使用場合。例如，對不同的文件應用不同的設定，此特性稱作多任務。具體實現實在每一個插件配置中增加一個額外的命名對象屬性。每一個這樣的多任務配置對象稱作一個目標。

grunt.initConfig(){
    pkg:grunt.file.readJSON("package.json");
    jshint: {
            options: {
                strict:true,
            },
            grunt:{
                src: ["Gruntfile.js","script/**/*.js","<%= pkg.name %>-<%= pkg.version %>.js"],
            }
            project:{
                options:{
                    trailing:true,
                },
                 src: ["Gruntfile.js","script/**/*.js","<%= pkg.name %>-<%= pkg.version %>.js"],
            }
        }
};

運行多目標

grunt jshint:project

編寫Grunt插件

暫時用不着，僅提供參考網址。Grunt 插件參考

引用

grunt 中文網

精通javascript開發