快捷導(dǎo)航

使用GruntJS鏈接與壓縮多個(gè)JavaScript文件過程詳解

更新時(shí)間：2013年08月02日 16:31:56 作者：

怎么把多個(gè)JS文件搞成一個(gè)啊，GruntJS – JavaScript多文件編譯，風(fēng)格檢查，鏈接與壓縮神器，使用過程如下，有需要的朋友可以參考下，希望對大家有所幫助

自己寫了個(gè)簡單的HTML5 Canvas的圖表庫，可以支持餅圖，折線圖，散點(diǎn)圖，盒子圖柱狀圖，同時(shí)支持鼠標(biāo)提示，繪制過程動(dòng)畫效果等。最終我想把這些多個(gè)JS文件變成一個(gè)JS文件發(fā)布出去，于是我的問題來啦，怎么把這些JS文件搞成一個(gè)啊，群里有個(gè) 朋友告訴我，GruntJS – JavaScript多文件編譯，風(fēng)格檢查，鏈接與壓縮神器。Google了一把終于幫我完成這個(gè)任務(wù)，算是入門，分享一下過程。

一什么是GruntJS
不想翻譯英文，自己看它的網(wǎng)站吧->http://gruntjs.com/
二：安裝與運(yùn)行
它的官方教程說的不是很清楚，有點(diǎn)讓第一次看的人云里霧里的。我總結(jié)一下，GruntJS
是基于與依賴服務(wù)器node.js的。所以首先第一步是下載并安裝node.js,下載地址：
http://nodejs.org/download/

第二步：運(yùn)行安裝grunt命令行工具– 目的是為了使用grunt命令
只有在windows的命令行窗口中運(yùn)行：npm install -g grunt-cli即可。更具體的解釋參見這里：http://gruntjs.com/getting-started

第三步：在項(xiàng)目的根目錄創(chuàng)建project.json與Gruntfile.js兩個(gè)文件
因?yàn)間runt的task運(yùn)行要依賴于這兩個(gè)文件。
其中創(chuàng)建project.json文件方法可以通過命令行實(shí)現(xiàn)：nmp init我創(chuàng)建project.json
內(nèi)容如下：

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

 
{ 
"name": "fishchart", 
"version": "0.0.1", 
"description": "html5 canvas chart library", 
"author": "zhigang", 
"license": "BSD", 
"devDependencies": { 
"grunt": "~0.4.1", 
"grunt-contrib-uglify": "~0.2.2", 
"grunt-contrib-jshint": "~0.6.2", 
"grunt-contrib-concat": "~0.3.0" 
} 
} 

使用命令創(chuàng)建時(shí)候，如果你不知道寫什么直接回車跳過即可。

三：安裝與使用Grunt Plug-in完成javascript文件鏈接與壓縮
1. 安裝javascript文件鏈接插件支持
npm install grunt-contrib-concat --save-dev
2. 安裝javascript文件壓縮插件支持
npm install grunt-contrib-uglify --save-dev
3. 在Gruntfile.js文件中配置選項(xiàng)，加載與定義task

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

 
module.exports = function(grunt) { 
grunt.initConfig({ 
//our JSHint options 
jshint: { 
all: ['main.js'] //files to lint 
}, 
//our concat options 
concat: { 
options: { 
separator: ';' //separates scripts 
}, 
dist: { 
src: ['js/*.js', 'js/**/*.js'], //Grunt mini match for your scripts to concatenate 
dest: 'js/fishchart_v0.0.1.js' //where to output the script 
} 
}, 
//our uglify options 
uglify: { 
js: { 
files: { 
'js/fishchart_v0.0.1.js': ['js/fishchart_v0.0.1.js'] //save over the newly created script 
} 
} 
} 
}); 
//load our tasks 
grunt.loadNpmTasks('grunt-contrib-jshint'); 
grunt.loadNpmTasks('grunt-contrib-concat'); 
grunt.loadNpmTasks('grunt-contrib-uglify'); 
// default tasks to run 
// grunt.registerTask('default', ['jshint', 'concat', 'uglify']); 
grunt.registerTask('development', ['jshint']); 
grunt.registerTask('production', ['jshint', 'concat', 'uglify']); 
} 