使用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 相关文章推荐
DOM基础教程之使用DOM控制表单
Jan 20 Javascript
jQuery提示插件alertify使用指南
Apr 21 Javascript
jQuery实现滚动鼠标放大缩小图片的方法(附demo源码下载)
Mar 05 Javascript
jQuery 3.0中存在问题及解决办法
Jul 15 Javascript
解决OneThink中无法异步提交kindeditor文本框中修改后的内容方法
May 05 Javascript
JS点击缩略图整屏居中放大图片效果
Jul 04 Javascript
vue.js异步上传文件前后端实现代码
Aug 22 Javascript
vue中锚点的三种方法
Jul 06 Javascript
js中apply()和call()的区别与用法实例分析
Aug 14 Javascript
详解Vue.js iview实现树形权限表(可扩展表)
Sep 30 Javascript
jQuery实现的老虎机跑动效果示例
Dec 29 jQuery
vue 父组件中调用子组件函数的方法
Jun 06 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
Zend Framework自定义Helper类相关注意事项总结
2016/03/14 PHP
PHP图像识别技术原理与实现
2016/10/27 PHP
php数据库的增删改查 php与javascript之间的交互
2017/08/31 PHP
PHP的PDO预处理语句与存储过程
2019/01/27 PHP
在Laravel中使用GuzzleHttp调用第三方服务的API接口代码
2019/10/15 PHP
Javascript的闭包
2009/12/31 Javascript
对js关键字命名的疑问介绍
2014/04/25 Javascript
javascript随机之洗牌算法深入分析
2014/06/07 Javascript
浅谈Sizzle的“编译原理”
2015/04/14 Javascript
JavaSciprt中处理字符串之sup()方法的使用教程
2015/06/08 Javascript
详解JavaScript对象和数组
2015/12/03 Javascript
实例讲解jquery与json的结合
2016/01/07 Javascript
jQuery如何封装输入框插件
2016/08/19 Javascript
微信小程序 常用工具类详解及实例
2017/02/15 Javascript
微信小程序使用navigateTo数据传递的实例
2017/09/26 Javascript
JavaScript原生实现观察者模式的示例
2017/12/15 Javascript
js replace替换字符串同时替换多个方法
2018/11/27 Javascript
浅谈Javascript常用正则表达式应用
2019/03/08 Javascript
Vue路由模块化配置的完整步骤
2019/08/14 Javascript
Vue-router编程式导航的两种实现代码
2021/03/04 Vue.js
[01:06]DOTA2小知识课堂 Ep.02 吹风竟可解梦境缠绕
2019/12/05 DOTA
python xlsxwriter创建excel图表的方法
2018/06/11 Python
Python 用三行代码提取PDF表格数据
2019/10/13 Python
Python使用Tkinter实现转盘抽奖器的步骤详解
2020/01/06 Python
python数据库编程 Mysql实现通讯录
2020/03/27 Python
Python新手学习装饰器
2020/06/04 Python
html5组织文档结构_动力节点Java学院整理
2017/07/11 HTML / CSS
国际鲜花速递专家:Floraqueen
2016/11/24 全球购物
C#如何允许一个类被继承但是避免这个类的方法被重载?
2015/02/24 面试题
线程问题:wait()方法是定义在哪个类里面
2015/07/07 面试题
销售人员求职信
2014/07/22 职场文书
离婚协议书范本(2014版)
2014/09/28 职场文书
2015年酒店销售部工作总结
2015/07/24 职场文书
golang import自定义包方式
2021/04/29 Golang
MySQL高速缓存启动方法及参数详解(query_cache_size)
2021/07/01 MySQL
引用计数法和root搜索算法以及JVM中判定对象需要回收的方法
2022/04/19 Java/Android