使用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 相关文章推荐
Node.js模拟浏览器文件上传示例
Mar 26 Javascript
JavaScript中判断函数、变量是否存在
Jun 10 Javascript
JavaScript类型系统之Object详解
Jan 07 Javascript
使用基于Node.js的构建工具Grunt来发布ASP.NET MVC项目
Feb 15 Javascript
jQuery Validate设置onkeyup验证的实例代码
Dec 09 Javascript
如何获取元素的最终background-color
Feb 06 Javascript
vue Render中slots的使用的实例代码
Jul 19 Javascript
element-ui中的select下拉列表设置默认值方法
Aug 24 Javascript
微信小程序前端自定义分享的实现方法
Jun 13 Javascript
layer设置maxWidth及maxHeight解决方案
Jul 26 Javascript
vue+导航锚点联动-滚动监听和点击平滑滚动跳转实例
Nov 13 Javascript
基于js判断浏览器是否支持webGL
Apr 18 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文件扩展名判断及获取文件扩展名的N种方法
2015/09/12 PHP
Laravel框架实现的记录SQL日志功能示例
2018/06/19 PHP
Laravel路由研究之domain解决多域名问题的方法示例
2019/04/04 PHP
Js 获取HTML DOM节点元素的方法小结
2009/04/24 Javascript
关于jquery append() html时的小问题的解决方法
2010/12/16 Javascript
web的各种前端打印方法之jquery打印插件PrintArea实现网页打印
2013/01/09 Javascript
原生js实现查找/添加/删除/指定元素的class
2013/04/12 Javascript
checkbox使用示例
2013/08/23 Javascript
NodeJS学习笔记之Connect中间件模块(二)
2015/01/27 NodeJs
TinyMCE提交AjaxForm获取不到数据的解决方法
2015/03/05 Javascript
jquery比较简洁的软键盘特效实现方法
2015/03/19 Javascript
javascript如何操作HTML下拉列表标签
2015/08/20 Javascript
json格式数据的添加,删除及排序方法
2016/01/21 Javascript
Jquery实现上下移动和排序代码
2016/10/17 Javascript
jquery实现全选、全不选以及单选功能
2017/03/23 jQuery
JS实现访问DOM对象指定节点的方法示例
2018/04/04 Javascript
vue实现购物车案例
2020/05/30 Javascript
使用Python脚本生成随机IP的简单方法
2015/07/30 Python
Python错误提示:[Errno 24] Too many open files的分析与解决
2017/02/16 Python
python 使用turtule绘制递归图形(螺旋、二叉树、谢尔宾斯基三角形)
2019/05/30 Python
简单了解python反射机制的一些知识
2019/07/13 Python
python实现用户名密码校验
2020/03/18 Python
Python库安装速度过慢解决方案
2020/07/14 Python
J2EE的优越性主要表现在哪些方面
2016/03/28 面试题
数控技术学生的自我评价
2014/02/15 职场文书
《回乡偶书》教学反思
2014/04/12 职场文书
保护环境建议书300字
2014/05/13 职场文书
2015年基层党建工作总结
2015/05/14 职场文书
高中地理教学反思
2016/02/19 职场文书
决心书格式及范文
2019/06/24 职场文书
导游词之南京中山陵
2019/11/27 职场文书
PHP解决高并发问题
2021/04/01 PHP
如何用Node.js编写内存效率高的应用程序
2021/04/30 Javascript
Python数据可视化之基于pyecharts实现的地理图表的绘制
2021/06/10 Python
Pytest中skip skipif跳过用例详解
2021/06/30 Python
铁拳制作人赞《铁拳7》老头环Mod:制作精良 但别弄了
2022/04/03 其他游戏