使用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 相关文章推荐
jQuery live( type, fn ) 委派事件实现
Oct 11 Javascript
JavaScript高级程序设计(第3版)学习笔记10 再访js对象
Oct 11 Javascript
Jquery实现Div上下移动示例
Apr 23 Javascript
json属性名为什么要双引号(个人猜测)
Jul 31 Javascript
js树插件zTree获取所有选中节点数据的方法
Jan 28 Javascript
基于jQuery1.9版本如何判断浏览器版本类型
Jan 12 Javascript
整理一下常见的IE错误
Nov 18 Javascript
微信公众平台开发教程(四) 实例入门:机器人回复(附源码)
Dec 02 Javascript
js事件触发操作实例分析
Jun 21 Javascript
Vue 实现简易多行滚动"弹幕"效果
Jan 02 Javascript
原生js实现拖拽移动与缩放效果
Aug 24 Javascript
jdk1.8+vue elementui实现多级菜单功能
Sep 24 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
基于mysql的论坛(3)
2006/10/09 PHP
些很实用且必用的小脚本代码
2006/06/26 Javascript
jquery ajax学习笔记2 使用XMLHttpRequest对象的responseXML
2011/10/16 Javascript
jquery移动listbox的值原理及代码
2013/05/03 Javascript
JavaScript 表单处理实现代码
2015/04/13 Javascript
JavaScript中string对象
2015/06/12 Javascript
jquery实现仿Flash的横向滑动菜单效果代码
2015/09/17 Javascript
js 将图片连接转换成base64格式的简单实例
2016/08/10 Javascript
详解动画插件wow.js的使用方法
2017/09/13 Javascript
完美解决axios在ie下的兼容性问题
2018/03/05 Javascript
解决vue打包后刷新页面报错:Unexpected token
2019/08/27 Javascript
vue实现跳转接口push 转场动画示例
2019/11/01 Javascript
Vue实现简单的拖拽效果
2020/08/25 Javascript
JS实现简易日历效果
2021/01/25 Javascript
[00:05]ChinaJoy现场 DOTA2玩家高呼“CN DOTA BEST DOTA”
2019/08/04 DOTA
详解Python中contextlib上下文管理模块的用法
2016/06/28 Python
Python模拟登陆淘宝并统计淘宝消费情况的代码实例分享
2016/07/04 Python
Python 3.8正式发布,来尝鲜这些新特性吧
2019/10/15 Python
SELENIUM自动化模拟键盘快捷键操作实现解析
2019/10/28 Python
Python socket模块ftp传输文件过程解析
2019/11/05 Python
pytorch 改变tensor尺寸的实现
2020/01/03 Python
Python模块的定义,模块的导入,__name__用法实例分析
2020/01/07 Python
tensorflow 查看梯度方式
2020/02/04 Python
Python如何把多个PDF文件合并代码实例
2020/02/13 Python
Python基础类继承重写实现原理解析
2020/04/03 Python
详解如何使用Pytest进行自动化测试
2021/01/14 Python
TensorFlow低版本代码自动升级为1.0版本
2021/02/20 Python
html特殊符号示例 html特殊字符编码对照表
2014/01/14 HTML / CSS
美国室内和室外装饰花盆购物网站:ePlanters
2019/03/22 全球购物
C++如何引用一个已经定义过的全局变量
2014/08/25 面试题
职业技术学校毕业生推荐信
2013/12/03 职场文书
会计专业毕业生自荐信范文
2013/12/20 职场文书
试用期转正鉴定评语
2014/01/27 职场文书
python标准库ElementTree处理xml
2022/05/20 Python
element tree树形组件回显数据问题解决
2022/08/14 Javascript
什么是clearfix (一文搞清楚css清除浮动clearfix)
2023/05/21 HTML / CSS