使用GruntJS链接与压缩多个JavaScript文件
自己写了个简单的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']);
}
四:运行结果
最后还想赞一下,这个东西太好用啦!
分享到:
相关推荐
现在通过js语言开发的富客户端应用非常多,如extjs、jquery等,这是一个非常好用的压缩工具,方便把大js文件压缩,提高访问速度
软件简介:可以高效的压缩Javascript脚本文件缩短网页显示时间,可以混淆代码保护知识产权,还可以把多个文件合并压缩。产生的代码兼容IE,FireFox等常用浏览器。本软件可免费使用和转载,但严禁用于商业用途。 本...
demo介绍:将zip包解压到文件系统中,创建content文件夹,提供对文件系统操作的API以及将文件系统打包下载的功能。
多个文件框javascript搜集多个文件框javascript搜集多个文件框javascript搜集
javascript混淆,javascript压缩,javascript加密
软件简介:可以高效的压缩Javascript脚本文件缩短网页显示时间,可以混淆代码保护知识产权,还可以把多个文件合并压缩。产生的代码兼容IE,FireFox等常用浏览器。本软件可免费使用和转载,但严禁用于商业用途。 本...
利用JAVASCRIPT即你想那个GZIP压缩与解压缩 最近流行的网络游戏(FLASH)数据传输都是用GZIP进行压缩与解压缩的,在客户端FLASH对与服务器交互的数据进行解压缩,
本文实例讲述了javascript使用Blob对象实现的下载文件操作。分享给大家供大家参考,具体如下: Blob对象 前言 环境 操作 总结 Blob是一个类文件的不可变的原始数据对象,非javascript原生数据类型,File对象...
这个是基于软件版本的,在线版本的是单个文件的压缩,如果文件比较多,就可以用这款软件,他可以批量的压缩当前文件夹中包含子目录中的.js扩展名文件。 使用方法:将jsmin.exe拷贝到你想要压缩的目录中,也可以将你...
Javascript是网页制作中离不开的脚本语言,依靠它,一个网页的内容才生动活泼、富有朝气。但也许你还没有发现并应用它的一些更高级的功能吧?...那就请跟我来,本文将详细描述如何使用Javascript语言进行文件操作。
yuicompressor-maven-plugin, 用于压缩 (Minify/Ofuscate/Aggregate) Javascript文件和使用 YUI 压缩器的CSS文件的Maven 插件 [[Flattr this git repo] ( http://api.flattr.com/button/flattr-badge-large.png)]...
前一篇讲述了如何使用concat和uglify命令实现JavaScript资源的合并,压缩。这篇讲述下css资源的合并和压缩。
可以直接用的js,选择多个文件上传。代码少,功能多!
脚本使用Terser来压缩JavaScript文件。你需要先安装Terser,可以通过npm全局安装:npm install -g terser。 脚本将main.js文件从源代码目录压缩,并输出到构建目录,文件名为main.min.js。 你可以根据项目的需求,在...
压缩多个 js 方法: [removed] [removed] 压缩多个 CSS 方法: <link rel="stylesheet" media="all" href="http://julying.com/lab/compress-js-css/file=/lab/coffee/layerImages/layer.css,/lab/coffee...
分享一个不错的javascript代码压缩工具,需要安装JAVA环境
那就请跟我来,本文将详细描述如何使用Javascript语言进行文件操作。 一、功能实现核心:FileSystemObject 对象 其实,要在Javascript中实现文件操作功能,主要就是依靠FileSystemobject对象。在详细介绍...
java开发中压缩js,css文件 给定js或css文件 直接输出压缩后的内容或文件.有注释,易操作.
NULL 博文链接:https://jintongyao-hotmail-com.iteye.com/blog/526080
本书介绍了JavaScript与Jscript编程的各方面知识,包括利用客户机方脚本和文档对象模型进行Web浏览器编程,利用服务器方脚本、活动服务器页面、JSP和LiveWire进行Web服务器方编程,还将介绍Rhino与WSH。更重要的是,...