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

四运行结果

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