使用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控制显示隐藏兼容问题(IE6、IE7、IE8)
Apr 01 Javascript
Jquery拖拽并简单保存的实现代码
Nov 28 Javascript
javascript for循环从入门到偏门(效率优化+奇特用法)
Aug 01 Javascript
jQuery中:contains选择器用法实例
Dec 30 Javascript
js给selected添加options的方法
May 06 Javascript
js漂浮广告实现代码
Aug 15 Javascript
JS实现快速的导航下拉菜单动画效果附源码下载
Nov 01 Javascript
vue.js element-ui validate中代码不执行问题解决方法
Dec 18 Javascript
vue中使用refs定位dom出现undefined的解决方法
Dec 21 Javascript
vue页面加载闪烁问题的解决方法
Mar 28 Javascript
JavaScript实现京东放大镜效果
Dec 03 Javascript
vue-cli4使用全局less文件中的变量配置操作
Oct 21 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超大文件下载,断点续传下载的方法详解
2013/06/06 PHP
PHP实现图片批量打包下载功能
2017/03/01 PHP
PHP实现数组转JSon和JSon转数组的方法示例
2018/06/14 PHP
PHP5.0 TIDY_PARSE_FILE缓冲区溢出漏洞的解决方案
2018/10/14 PHP
javascript陷阱 一不小心你就中招了(字符运算)
2013/11/10 Javascript
js实现iGoogleDivDrag模块拖动层拖动特效的方法
2015/03/04 Javascript
浅析BootStrap栅格系统
2016/06/07 Javascript
jQuery实现倒计时重新发送短信验证码功能示例
2017/01/12 Javascript
JS时间控制实现动态效果的实例讲解
2017/07/31 Javascript
如何开发出更好的JavaScript模块
2017/12/22 Javascript
收集前端面试题之url、href、src
2018/03/22 Javascript
解决前后端分离 vue+springboot 跨域 session+cookie失效问题
2019/05/13 Javascript
记一次react前端项目打包优化的方法
2020/03/30 Javascript
[40:57]TI4 循环赛第二日 iG vs EG
2014/07/11 DOTA
[54:24]Optic vs TNC 2018国际邀请赛小组赛BO2 第二场
2018/08/18 DOTA
利用Python破解验证码实例详解
2016/12/08 Python
使用Django Form解决表单数据无法动态刷新的两种方法
2017/07/14 Python
Python+OpenCV实现车牌字符分割和识别
2018/03/31 Python
详谈python中冒号与逗号的区别
2018/04/18 Python
详解django.contirb.auth-认证
2018/07/16 Python
python实现对象列表根据某个属性排序的方法详解
2019/06/11 Python
PyCharm导入python项目并配置虚拟环境的教程详解
2019/10/13 Python
django中间键重定向实例方法
2019/11/10 Python
python加载自定义词典实例
2019/12/06 Python
pycharm解决关闭flask后依旧可以访问服务的问题
2020/04/03 Python
CSS3 Notes: -webkit-box-reflect实现倒影的实例
2016/12/08 HTML / CSS
ECCO爱步加拿大官网:北欧丹麦鞋履及皮具品牌
2017/07/08 全球购物
完美实现CSS垂直居中的11种方法
2021/03/27 HTML / CSS
2014自主招生自荐信策略
2014/01/27 职场文书
小学生学雷锋演讲稿
2014/04/25 职场文书
2014年入党积极分子党校培训心得体会
2014/07/08 职场文书
史上最牛的辞职信
2015/02/28 职场文书
幼师自荐信范文
2015/03/06 职场文书
python 调用js的四种方式
2021/04/11 Python
如何在向量化NumPy数组上进行移动窗口
2021/05/18 Python
SpringBoot整合阿里云视频点播的过程详解
2021/12/06 Java/Android