本文详细介绍如何利用GruntJS结合Node.js环境，实现多个JavaScript文件的自动链接与压缩。通过配置Gruntfile.js及安装concat和uglify插件，开发者可将分散的JS源码整合并优化为单个发布文件，提升前端加载效率。
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']);
} 运行结果与总结
四、运行结果
最后还想赞一下，这个东西太好用啦！