使用GruntJS链接与压缩多个JavaScript文件过程详解

GruntJS简介与背景

笔者开发了一款支持饼图、折线图、散点图、盒子图及柱状图的HTML5 Canvas图表库，具备鼠标提示与绘制动画功能。为便于发布，需将多个JS文件合并为单一文件。经群友推荐及搜索，确定使用GruntJS进行多文件编译、风格检查、链接与压缩，本文分享具体操作流程。

一、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的任务运行依赖这两个文件。

可通过命令行执行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插件完成JS文件链接与压缩

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']);
} 

运行结果与总结

四、运行结果

最后还想赞一下，这个东西太好用啦！