萬盛學電腦網

 萬盛學電腦網 >> 腳本專題 >> javascript >> 使用GruntJS鏈接與壓縮多個JavaScript文件過程詳解

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

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

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

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

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

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

復制代碼 代碼如下:
{
"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"
}
}


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

三: 安裝與使用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文件中配置選項,加載與定義task

復制代碼 代碼如下:
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']);
}


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

copyright © 萬盛學電腦網 all rights reserved