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


Posted in Javascript onAugust 02, 2013

自己写了个简单的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']); 
}

四:运行结果
使用GruntJS链接与压缩多个JavaScript文件过程详解 
最后还想赞一下,这个东西太好用啦!
Javascript 相关文章推荐
js中判断控件是否存在
Aug 25 Javascript
jquery select(列表)的操作(取值/赋值)
Mar 16 Javascript
EasyUI中的tree用法介绍
Nov 01 Javascript
JavaScript实现图片DIV竖向滑动的方法
Apr 25 Javascript
jQuery子窗体取得父窗体元素的方法
May 11 Javascript
AngularJS打开页面隐藏显示表达式用法示例
Dec 25 Javascript
JS对象深度克隆实例分析
Mar 16 Javascript
对Angular中单向数据流的深入理解
Mar 31 Javascript
JavaScript解决浮点数计算不准确问题的方法分析
Jul 09 Javascript
在React项目中使用Eslint代码检查工具及常见问题
Oct 10 Javascript
node.js处理前端提交的GET请求
Aug 30 Javascript
vue表单中遍历表单操作按钮的显示隐藏示例
Oct 30 Javascript
把jquery 的dialog和ztree结合实现步骤
Aug 02 #Javascript
jquery的相对父元素和相对文档定位示例代码
Aug 02 #Javascript
jquery实现图片渐变切换兼容ie6/Chrome/Firefox
Aug 02 #Javascript
JS 获取select(多选下拉)中所选值的示例代码
Aug 02 #Javascript
jQuery在html有效在jsp无效的原因及解决方法
Aug 02 #Javascript
Js日期选择自动填充到输入框(界面漂亮兼容火狐)
Aug 02 #Javascript
JS日期和时间选择控件升级版(自写)
Aug 02 #Javascript
You might like
php比较两个绝对时间的大小
2014/01/31 PHP
PHP使用GIFEncoder类生成gif动态滚动字幕
2014/07/01 PHP
PHP中读取文件的8种方法和代码实例
2014/08/05 PHP
TP5(thinkPHP5)框架基于ajax与后台数据交互操作简单示例
2018/09/03 PHP
20个最新的jQuery插件
2012/01/13 Javascript
用Javascript实现Windows任务管理器的代码
2012/03/27 Javascript
javascript中window.event事件用法详解
2012/12/11 Javascript
Javascript中设置默认参数值示例
2014/09/11 Javascript
jQuery检测鼠标左键和右键点击的方法
2015/03/17 Javascript
javascript获取select值的方法分析
2015/07/02 Javascript
使用JavaScript为Kindeditor自定义按钮增加Audio标签
2016/03/18 Javascript
解析利用javascript如何判断一个数为素数
2016/12/08 Javascript
ES6生成器用法实例分析
2017/04/10 Javascript
js使用generator函数同步执行ajax任务
2017/09/05 Javascript
仿京东快报向上滚动的实例
2017/12/13 Javascript
微信小程序如何获取用户收货地址
2018/11/27 Javascript
微信小程序picker组件关于objectArray数据类型的绑定方法
2019/03/13 Javascript
了解javascript中let和var及const关键字的区别
2019/05/24 Javascript
vue中渲染对象中属性时显示未定义的解决
2020/07/31 Javascript
Vue+Element自定义纵向表格表头教程
2020/10/26 Javascript
[52:20]DOTA2-DPC中国联赛正赛 SAG vs XGBO3 第一场 3月5日
2021/03/11 DOTA
Python while 循环使用的简单实例
2016/06/08 Python
python读取目录下所有的jpg文件,并显示第一张图片的示例
2019/06/13 Python
解决Pycharm 导入其他文件夹源码的2种方法
2020/02/12 Python
python通用读取vcf文件的类(复制粘贴即可用)
2020/02/29 Python
详解pyinstaller生成exe的闪退问题解决方案
2020/06/19 Python
Pandas直接读取sql脚本的方法
2021/01/21 Python
is_file和file_exists效率比较
2021/03/14 PHP
viagogo英国票务平台:演唱会、体育比赛、戏剧门票
2017/03/24 全球购物
一道Delphi面试题
2016/10/28 面试题
光荣入党自我鉴定
2014/01/22 职场文书
2014年向国旗敬礼活动总结
2014/09/27 职场文书
隐形的翅膀观后感
2015/06/10 职场文书
Python标准库之typing的用法(类型标注)
2021/06/02 Python
mysql聚集索引、辅助索引、覆盖索引、联合索引的使用
2022/02/12 MySQL
Python实现猜拳与猜数字游戏的方法详解
2022/04/06 Python