用 JSBuilder 压缩你的 JavaScript / CSS 源代码

简介: JSBuilder2 (extjs.com/products/jsbuilder)是配合 Ext JS 3 新发布的源码打包工具,用 Java 语言编写,打包编译成 JAR 格式执行文件发布到程序员手中。

JSBuilder2 (extjs.com/products/jsbuilder)是配合 Ext JS 3 新发布的源码打包工具,用 Java 语言编写,打包编译成 JAR 格式执行文件发布到程序员手中。作为一个辅助开发者的打包工具,它内含有几种开源项目在内,包括 Rhino Project(著名的JavaScript编译器)、YUI Compressor(对 JS/CSS 压缩实行 Minification、混淆 Obfuscation)和 Java 环境下 JSON 的编码器(来自www.json.org),方便在 JavaScript 和 CSS 项目中使用。其中”混淆“还是主要依靠 YUI Compressor 实现之,因为我们知道,JavaScript 源码的混淆可谓对许多项目的保密来说可谓”重中之重“,YUI Compressor 的算法应该说是十分保险的,提供足够高的混淆级别,如混淆局部变量的名称等等。

JSBuilder2 具有特性如下:

  • 跨平台的 Java 应用程序,用法简单
  • 以 JSON 为配置文件的结构
  • 采用 YUI Compressor 来进行文件的压缩
  • 在开发阶段到部署阶段之间,资源文件都可以轻松迁移

与第一版 GUI 界面明显不同,JSBuilder2 是纯命令行的工具,因此我们必须了解一下它的参数如何。首先运行 JAR 包的执行文件必须要有 java.exe。通常我们将该命令加入“环境变量”中,然后加入-jar 参数即可以运行这个 JSBuilder2.jar 文件。关于 JSBuilder 的参数列表,可见:

  • --projectFile -p   (必填的)jsb2 文件,该文件定义了打包的具体任务。 Location of a jsb2 project file
  •  --homeDir -d       (必填的)生成的主目录,通常就是项目部署的目录。
  • --verbose -v       (可选的参数)输出正在生产的详细过程。
  • --debugSuffix -s   (可选的参数)为便于调试,生产 JS 调试文件的后续名称,默认为“debug”,以表示这是调试用的 JS 文件。
  • --help -h          (可选的参数)显示帮助。

Windows 平台上的用法:

java -jar JSBuilder2.jar --projectFile C:/Apps/www/ext3svn/ext.jsb2 --homeDir C:/Apps/www/deploy/

Linux 或 OS X 平台上的用法:

java -jar JSBuilder2.jar --projectFile /home/aaron/www/trunk/ext.jsb2 --homeDir /home/aaron/www/deploy/

上面提到 JSBuilder 的 jsb2 文件,很明显的是为第二版所服务的配置文件,以区别于旧版。在第一版的时候,*.jsb 是采用 XML 文件作为配置其配置文件的,那时还是 .Net WinForm 写好的程序。而在这次 Java 重写的版本中,却是使用了 JSON 作为其配置文件的格式。我们说到 JSBuilder 既有 Moliza 的 Rhino JS 引擎也有 JSON.org 的包同时存在,它既可以让 JS 引擎以 eval() 函数获得 JSON 对象,也可以让 Java 的代码获得这个 JSON 对象,都是比较方便的方法。那么使用 XML 是不是较为不便呢?也不一定的,因为我们可以从 Rhino 的开源信息得到了解,较新版的 Rhino 是升级到 JavaScript 1.8,也就正式支持 E4X(ECMAScript (aka JavaScript™) for XML,简称 E4X) 的标准。在 E4X 的支持下 XML 转为 JavaScript 对象轻而易举。当然使用 XML 的话又是另外一件事了。

下面我们说一下这个 JSON 格式的详细清单。

projectName String类型 说明该项目。
deployDir String类型 用于命令行指定的部署目录,这个目录是在HOMEDIR目录内创建的
licenseText String类型 为所有JS和CSS指定头部内容,使用/n 作换行符。
pkgs Array类型 包描述符的数组
resources Array类型 资源描述符的数组
file String类型 引入的文件。
path String类型 引入文件所在的目录。
isDebug Bool类型 是否生成调试版本 此配置当前是未启用的(UNUSED),因此总是都会产生调试和压缩两种版本的。
fileIncludes Array类型 需要在此包中引入的文件描述符。
pkgDeps Array类型 包描述符列表。此配置的行为依赖于 includeDeps 的配置如何。
includeDeps Bool类型 在输出的文件中是否包含依赖的文件。默认为false。
src String类型 被移到资源的源
dest String类型 被移动资源的目的地
filters String类型 创建一个正则表达式,指定它来如何筛选从src复制到dest 文件。所有 SVN 和隐藏文件将自动被排除在外。请注意,所有 /'s 必须经过转义为//。
src String类型 被移到资源的源
dest String类型 被移动资源的目的地
filters String类型 创建一个正则表达式,指定它来如何筛选从 src 复制到 dest 文件。所有 SVN 和隐藏文件将自动被排除在外。请注意,所有/'s必须经过转义为 //。

从清单中可以看出,JSON 格式仍然是以 Key/Value,键/键值列出。我们定义好我们自己的配置后,保存为一份 *.jsb2 文件让 JSBuilder 读取。

目录
相关文章
|
存储 前端开发 JavaScript
仿真银行app下载安装, 银行卡虚拟余额制作app,用html+css+js实现逼真娱乐工具
这是一个简单的银行账户模拟器项目,用于学习前端开发基础。用户可进行存款、取款操作,所有数据存储于浏览器内存中
|
JavaScript 前端开发
CSS3 动画和 JavaScript 动画的性能比较
具体的性能表现还会受到许多因素的影响,如动画的复杂程度、浏览器的性能、设备的硬件条件等。在实际应用中,需要根据具体情况选择合适的动画技术。
506 154
|
人工智能 程序员 UED
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
902 21
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
前端开发 JavaScript
【Javascript系列】Terser除了压缩代码之外,还有优化代码的功能
Terser 是一款广泛应用于前端开发的 JavaScript 解析器和压缩工具,常被视为 Uglify-es 的替代品。它不仅能高效压缩代码体积,还能优化代码逻辑,提升可靠性。例如,在调试中发现,Terser 压缩后的代码对删除功能确认框逻辑进行了优化。常用参数包括 `compress`(启用压缩)、`mangle`(变量名混淆)和 `output`(输出配置)。更多高级用法可参考官方文档。
1043 11
|
前端开发 JavaScript
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
811 14
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
前端开发
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
1249 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
html+js+css实现的建筑方块立体数字时钟源码
html+js+css实现的建筑方块立体数字时钟源码
673 33
一个好看的小时钟html+js+css源码
一个好看的小时钟html+js+css源码
312 24
纸屑飘落生日蛋糕场景js+css3动画特效
纸屑飘落生日蛋糕CSS3动画特效是一款js+css3制作的全屏纸屑飘落,生日蛋糕点亮庆祝动画特效。
256 3
|
缓存 前端开发 JavaScript
优化CSS和JavaScript加载
优化CSS和JavaScript加载
359 1

热门文章

最新文章

  • 1
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(九):强势分析Animation动画各类参数;从播放时间、播放方式、播放次数、播放方向、播放状态等多个方面,完全了解CSS3 Animation
    536
  • 2
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(八):学习transition过渡属性;本文学习property模拟、duration过渡时间指定、delay时间延迟 等多个参数
    417
  • 3
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(七):学习ransform属性;本文学习 rotate旋转、scale缩放、skew扭曲、tanslate移动、matrix矩阵 多个参数
    412
  • 4
    (CSS)使用Flex布局,帮助你快速了解各种基本的Flex布局属性以及帮你让元素快速达到布局中的指定位置!
    268
  • 5
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(六):全方面分析css的Flex布局,从纵、横两个坐标开始进行居中、两端等元素分布模式;刨析元素间隔、排序模式等
    524
  • 6
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(五):背景属性;float浮动和position定位;详细分析相对、绝对、固定三种定位方式;使用浮动并清除浮动副作用
    704
  • 7
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(四):元素盒子模型;详细分析边框属性、盒子外边距
    1285
  • 8
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(三):元素继承关系、层叠样式规则、字体属性、文本属性;针对字体和文本作样式修改
    299
  • 9
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(二):CSS伪类:UI伪类、结构化伪类;通过伪类获得子元素的第n个元素;创建一个伪元素展示在页面中;获得最后一个元素;处理聚焦元素的样式
    1072
  • 10
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(一):CSS发展史;CSS样式表的引入;CSS选择器使用,附带案例介绍
    488