使用Grunt.js管理你項(xiàng)目的應(yīng)用說明
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)單的說:為了自動(dòng)化。
對(duì)于前端項(xiàng)目,例如:
•為了明確模塊分工,我們可能會(huì)將Javascript代碼拆成很小很小的一個(gè)個(gè)js文件,但是我們知道,在最終頁(yè)面上,我們知道過多的js文件會(huì)產(chǎn)生過多的Http Request,這不利于頁(yè)面優(yōu)化。所以我們可能希望可以合并這些js文件的工具。
•為了用戶端請(qǐng)求的文件盡量小,我們希望我們的HTML、Javascript等文件能進(jìn)行壓縮。
•我們可能需要對(duì)源代碼進(jìn)行一些單元測(cè)試和回歸測(cè)試。
•我們可能希望有工具能夠通過源代碼備注自動(dòng)生成文檔,免得手動(dòng)再寫文檔。
•……
很明顯,這一切都有各種各樣的小工具能幫我們做到,但是我們希望最好能輸入一個(gè)命令,打開一個(gè)程序,或者干脆每次修改文件保存后自動(dòng)進(jìn)行這一切事情。
以前我們可能使用NodeJS自己寫一個(gè)build程序,但是現(xiàn)在Grunt.js能夠提供我們需要的一切。
安裝Grunt.js
Grunt.js 0.4之后,其不再使用全局方式安裝整個(gè)Grunt.js,而是在全局安裝Grunt.js Client,然后在當(dāng)前項(xiàng)目中安裝Grunt,來避免未來不同項(xiàng)目對(duì)Grunt不同版本的依賴關(guān)系。
如果安裝了之前的版本,可以使用npm的命令來刪除掉原來的Grunt.js。
npm uninstall -g grunt
然后安裝Grunt.js Client:
npm install -g grunt-cli
package.json
package.json是項(xiàng)目的配置文件,有一些項(xiàng)目的依賴信息,以及作者、版本等信息。我們先寫一個(gè)簡(jiǎn)單的package.json。
{
"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如下:
{
"name": "my-project",
"version": "0.1.0",
"devDependencies": {
"grunt": "~0.4.1",
"grunt-contrib-uglify": "~0.2.0"
}
}
再使用:
npm install
我們就安裝了grunt-contrib-uglify了。
寫Gruntfile.js
module.exports = function(grunt) {
// 給grunt添加些設(shè)置
grunt.initConfig({
uglify: {
options: {
banner: '/*! 版權(quán)所有,這里亂寫 */\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ù)。
- Node.js的項(xiàng)目構(gòu)建工具Grunt的安裝與配置教程
- 使用基于Node.js的構(gòu)建工具Grunt來發(fā)布ASP.NET MVC項(xiàng)目
- 學(xué)習(xí)使用grunt來打包JavaScript和CSS程序的教程
- 配置Grunt的Task時(shí)通配符支持和動(dòng)態(tài)生成文件名問題
- Grunt入門教程(自動(dòng)任務(wù)運(yùn)行器)
- 詳解Grunt插件之LiveReload實(shí)現(xiàn)頁(yè)面自動(dòng)刷新(兩種方案)
- 使用GruntJS構(gòu)建Web程序之Tasks(任務(wù))篇
- 使用GruntJS構(gòu)建Web程序之合并壓縮篇
- 使用GruntJS構(gòu)建Web程序之構(gòu)建篇
- 使用GruntJS構(gòu)建Web程序之安裝篇
- 使用GruntJS鏈接與壓縮多個(gè)JavaScript文件過程詳解
- 基于Node.js的JavaScript項(xiàng)目構(gòu)建工具gulp的使用教程
相關(guān)文章
JavaScript 基礎(chǔ)知識(shí) 被自己遺忘的
JavaScript 基礎(chǔ)知識(shí) 被自己遺忘的,學(xué)習(xí)的朋友可以參考下。2009-10-10
JavaScript基礎(chǔ)心法 數(shù)據(jù)類型
一個(gè)很基礎(chǔ)的知識(shí)點(diǎn),這篇主要是介紹JavaScript中基本數(shù)據(jù)類型和引用數(shù)據(jù)類型是如何存儲(chǔ)的,需要的朋友可以參考下2018-03-03
Javascript入門學(xué)習(xí)第八篇 js dom節(jié)點(diǎn)屬性說明
上2篇文章我們講了 用dom方式 創(chuàng)建節(jié)點(diǎn),復(fù)制節(jié)點(diǎn),插入節(jié)點(diǎn), 刪除節(jié)點(diǎn),替換節(jié)點(diǎn),查找節(jié)點(diǎn),獲取屬性等。。。2008-07-07
在javascript中關(guān)于節(jié)點(diǎn)內(nèi)容加強(qiáng)
本篇文章,小編為大家介紹,關(guān)于在javascript中關(guān)于節(jié)點(diǎn)內(nèi)容加強(qiáng)的問題2013-04-04

