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

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

　　自己寫了個簡單的HTML Canvas的圖表庫可以支持餅圖折線圖散點圖盒子圖 柱狀圖同時支持鼠標提示繪制過程動畫效果等最終我想把這些多個JS文件變成 一個JS文件發布出去於是我的問題來啦怎麼把這些JS文件搞成一個啊群裡有個 朋友告訴我GruntJS – JavaScript多文件編譯風格檢查鏈接與壓縮神器Google了一 把終於幫我完成這個任務算是入門分享一下過程

一什麼是GruntJS
不想翻譯英文自己看它的網站吧>
二安裝與運行
它的官方教程說的不是很清楚有點讓第一次看的人雲裡霧裡的我總結一下GruntJS
是基於與依賴服務器nodejs的所以首先第一步是下載並安裝nodejs下載地址


第二步運行安裝grunt命令行工具– 目的是為了使用grunt命令
只有在windows的命令行窗口中運行npm install g gruntcli即可更具體的解釋參見這裡

第三步在項目的根目錄創建projectjson與Gruntfilejs兩個文件
因為grunt的task運行要依賴於這兩個文件
其中創建projectjson文件方法可以通過命令行實現nmp init我創建projectjson
內容如下

復制代碼 代碼如下:
{
"name": "fishchart"
"version": ""
"description": "html canvas chart library"
"author": "zhigang"
"license": "BSD"
"devDependencies": {
"grunt": "~"
"gruntcontribuglify": "~"
"gruntcontribjshint": "~"
"gruntcontribconcat": "~"
}
}

　　
使用命令創建時候如果你不知道寫什麼直接回車跳過即可

三 安裝與使用Grunt Plugin完成javascript文件鏈接與壓縮
安裝javascript文件鏈接插件支持
npm install gruntcontribconcat savedev
安裝javascript文件壓縮插件支持
npm install gruntcontribuglify savedev
在Gruntfilejs文件中配置選項加載與定義task

復制代碼 代碼如下:
moduleexports = function(grunt) {
gruntinitConfig({
//our JSHint options
jshint: {
all: [mainjs] //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_vjs //where to output the script
}
}
//our uglify options
uglify: {
js: {
files: {
js/fishchart_vjs: [js/fishchart_vjs] //save over the newly created script
}
}
}
});
//load our tasks
gruntloadNpmTasks(gruntcontribjshint);
gruntloadNpmTasks(gruntcontribconcat);
gruntloadNpmTasks(gruntcontribuglify);
// default tasks to run
// gruntregisterTask(default [jshint concat uglify]);
gruntregisterTask(development [jshint]);
gruntregisterTask(production [jshint concat uglify]);
}

　　
四運行結果
 
最後還想贊一下這個東西太好用啦！

From:http://tw.wingwit.com/Article/program/Java/JSP/201311/20451.html