快捷導(dǎo)航

使用Grunt.js管理你項(xiàng)目的應(yīng)用說(shuō)明

更新時(shí)間：2013年04月24日 11:45:12 作者：

以前我們可能使用NodeJS自己寫(xiě)一個(gè)build程序，但是現(xiàn)在Grunt.js能夠提供我們需要的一切

Grunt.js是什么？
Grunt.js是一個(gè)Javascript Task Runner（Javascript任務(wù)運(yùn)行器），其基于NodeJS，可用于自動(dòng)化構(gòu)建、測(cè)試、生成文檔的項(xiàng)目管理工具。

Grunt.js并不是僅僅是構(gòu)建工具，實(shí)際上他只是任務(wù)運(yùn)行器，管理每個(gè)子任務(wù)的自動(dòng)化運(yùn)行，我們還能使用他做更多東西。

為什么使用Grunt.js？
簡(jiǎn)單的說(shuō)：為了自動(dòng)化。
對(duì)于前端項(xiàng)目，例如：

•為了明確模塊分工，我們可能會(huì)將Javascript代碼拆成很小很小的一個(gè)個(gè)js文件，但是我們知道，在最終頁(yè)面上，我們知道過(guò)多的js文件會(huì)產(chǎn)生過(guò)多的Http Request，這不利于頁(yè)面優(yōu)化。所以我們可能希望可以合并這些js文件的工具。
•為了用戶端請(qǐng)求的文件盡量小，我們希望我們的HTML、Javascript等文件能進(jìn)行壓縮。
•我們可能需要對(duì)源代碼進(jìn)行一些單元測(cè)試和回歸測(cè)試。
•我們可能希望有工具能夠通過(guò)源代碼備注自動(dòng)生成文檔，免得手動(dòng)再寫(xiě)文檔。
•……
很明顯，這一切都有各種各樣的小工具能幫我們做到，但是我們希望最好能輸入一個(gè)命令，打開(kāi)一個(gè)程序，或者干脆每次修改文件保存后自動(dòng)進(jìn)行這一切事情。

以前我們可能使用NodeJS自己寫(xiě)一個(gè)build程序，但是現(xiàn)在Grunt.js能夠提供我們需要的一切。

安裝Grunt.js
Grunt.js 0.4之后，其不再使用全局方式安裝整個(gè)Grunt.js，而是在全局安裝Grunt.js Client，然后在當(dāng)前項(xiàng)目中安裝Grunt，來(lái)避免未來(lái)不同項(xiàng)目對(duì)Grunt不同版本的依賴關(guān)系。

如果安裝了之前的版本，可以使用npm的命令來(lái)刪除掉原來(lái)的Grunt.js。

npm uninstall -g grunt
然后安裝Grunt.js Client：

npm install -g grunt-cli

package.json
package.json是項(xiàng)目的配置文件，有一些項(xiàng)目的依賴信息，以及作者、版本等信息。我們先寫(xiě)一個(gè)簡(jiǎn)單的package.json。

復(fù)制代碼代碼如下:

{
  "name": "my-project",
  "version": "0.1.0",
  "devDependencies": {
    "grunt": "~0.4.1"
  }
}

name屬性，表示該項(xiàng)的名字。

version屬性，則是該項(xiàng)目的版本號(hào)。

devDependencies屬性，則包含該項(xiàng)目的依賴，目前我們的依賴只有g(shù)runt，以及版本為0.4.1。
在終端大概包含該package.json的目錄，輸入命令：

npm install
我們會(huì)發(fā)現(xiàn)，該目錄此時(shí)多了一個(gè)node_modules文件夾，里面有個(gè)grunt文件夾，這個(gè)就是我們安裝在項(xiàng)目的Grunt.js。

用Grunt.js進(jìn)行壓縮js代碼
grunt-contrib-uglify是Grunt.js的一個(gè)任務(wù)模塊，其基于著名的js壓縮工具uglify，進(jìn)行js壓縮任務(wù)。

首先我們?cè)陧?xiàng)目依賴加上grunt-contrib-uglify，package.json如下：

復(fù)制代碼代碼如下:

{
  "name": "my-project",
  "version": "0.1.0",
  "devDependencies": {
    "grunt": "~0.4.1",
    "grunt-contrib-uglify": "~0.2.0"
  }
}

再使用：

npm install
我們就安裝了grunt-contrib-uglify了。

寫(xiě)Gruntfile.js

復(fù)制代碼代碼如下:

module.exports = function(grunt) {

    // 給grunt添加些設(shè)置
    grunt.initConfig({
        uglify: {
            options: {
                banner: '/*! 版權(quán)所有，這里亂寫(xiě) */\n'
            },
            build: {
                src: 'src/core.js', //要壓縮的源文件，我們也可以用*表示通配，比如'src/*.js'
                dest: 'dst/core.js' //壓縮后輸出的位置
            }
        }
    });

// 載入 "uglify" 插件任務(wù)
grunt.loadNpmTasks('grunt-contrib-uglify');

// 定義默認(rèn)需要執(zhí)行的任務(wù)
grunt.registerTask('default', ['uglify']);

};

Gruntfile.js文件用于定義任務(wù)，以及任務(wù)組的執(zhí)行順序等。上面的文件我們定義將src/core.js文件壓縮后輸出成dst/core.js。則我們輸入命令：

grunt
的時(shí)候，則會(huì)自動(dòng)完成這個(gè)任務(wù)。

您可能感興趣的文章: