使用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实现3D球状标签云示例代码
Dec 01 Javascript
基于jQuery实现左右图片轮播(原理通用)
Dec 24 Javascript
jQuery数据检索中根据关键字快速定位GridView指定行的实现方法
Jun 08 Javascript
JavaScript中常用的验证reg
Oct 13 Javascript
JavaScript模板引擎Template.js使用详解
Dec 15 Javascript
jQuery实现在HTML文档加载完毕后自动执行某个事件的方法
May 08 jQuery
利用JavaScript的%做隔行换色的实例
Nov 25 Javascript
自定义vue组件发布到npm的方法
May 09 Javascript
深入理解js 中async 函数的含义和用法
May 13 Javascript
快速解决layui弹窗按enter键不停弹窗的问题
Sep 18 Javascript
我所理解的JavaScript中的this指向
Sep 04 Javascript
vue+elementUI实现表格列的显示与隐藏
Apr 13 Vue.js
把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/04/25 PHP
关于php循环跳出的问题
2013/07/01 PHP
php代码检查代理ip的有效性
2016/08/19 PHP
PHP实现小程序批量通知推送
2018/11/27 PHP
alixixi runcode.asp的代码不错的应用
2007/08/08 Javascript
Prototype Date对象 学习
2009/07/12 Javascript
调用js时ie6和ie7,ff的区别
2009/08/19 Javascript
键盘 keycode的值 javascript时触发事件时很有用的要素
2009/11/02 Javascript
解析prototype,JQuery中跳出each循环的方法
2013/12/12 Javascript
常用的几段javascript代码分享
2014/03/25 Javascript
JS模仿手机端九宫格登录功能实现代码
2016/04/28 Javascript
jquery实现表格中点击相应行变色功能效果【实例代码】
2016/05/09 Javascript
浅谈DOCTYPE对$(window).height()取值的影响
2016/07/21 Javascript
js实现各种复制到剪贴板的方法(分享)
2016/10/27 Javascript
VUE实现日历组件功能
2017/03/13 Javascript
JS常用正则表达式总结【经典】
2017/05/12 Javascript
vue-cli之router基本使用方法详解
2017/10/17 Javascript
vue使用iframe嵌入网页的示例代码
2020/06/09 Javascript
vue中子组件向父组件传递数据的实例代码(实现加减功能)
2018/04/20 Javascript
node前端模板引擎Jade之标签的基本写法
2018/05/11 Javascript
js单线程的本质 Event Loop解析
2019/10/29 Javascript
以Flask为例讲解Python的框架的使用方法
2015/04/29 Python
django 数据库连接模块解析及简单长连接改造方法
2019/08/29 Python
python操作gitlab API过程解析
2019/12/27 Python
Python稀疏矩阵及参数保存代码实现
2020/04/18 Python
简单介绍一下pyinstaller打包以及安全性的实现
2020/06/02 Python
CSS3之背景尺寸Background-size使用介绍
2013/10/14 HTML / CSS
css3教程之倾斜页面
2014/01/27 HTML / CSS
CSS实现定位元素居中的方法
2015/06/23 HTML / CSS
物理系毕业生自荐信
2013/11/01 职场文书
制药工程专业职业生涯规划范文
2014/03/10 职场文书
爱国卫生月活动总结范文
2014/04/25 职场文书
2014年测量员工作总结
2014/12/12 职场文书
浅谈Golang 切片(slice)扩容机制的原理
2021/06/09 Golang
【海涛教你打DOTA】虚空假面第一视角骨弓3房29杀
2022/04/01 DOTA
SQL使用复合索引实现数据库查询的优化
2022/05/25 SQL Server