用 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 读取。

目录
相关文章
|
19天前
|
前端开发 JavaScript 开发者
css和js
【4月更文挑战第22天】css和js
19 6
|
20天前
|
前端开发 JavaScript
结合CSS和JavaScript创建动态网页
【4月更文挑战第21天】结合CSS和JavaScript创建动态网页
19 4
|
1月前
|
JavaScript 前端开发
【快捷键配置】常用HTML类名、CSS样式名称、JS方法变量名、vue代码片段
【快捷键配置】常用HTML类名、CSS样式名称、JS方法变量名、vue代码片段
|
1月前
|
前端开发 JavaScript
【汇总】前端开发中高频次使用的JS、CSS、HTML代码片段合集
【汇总】前端开发中高频次使用的JS、CSS、HTML代码片段合集
|
1月前
|
前端开发 JavaScript
【实现js和css互通、共享常量参数值】js如何获取CSS/SCSS/LESS的常量、CSS/SCSS/LESS又是如何获取js的值(或者说js是如何主动推送参数给CSS使用的)?
【实现js和css互通、共享常量参数值】js如何获取CSS/SCSS/LESS的常量、CSS/SCSS/LESS又是如何获取js的值(或者说js是如何主动推送参数给CSS使用的)?
|
2天前
|
前端开发 JavaScript 索引
CSS常见用法 以及JS基础语法
CSS常见用法 以及JS基础语法
10 0
|
4天前
|
JavaScript 前端开发
js和css以及js制作弹窗
js和css以及js制作弹窗
10 1
|
10天前
|
缓存 前端开发 IDE
【专栏:工具与技巧篇】HTML与CSS代码压缩与合并
【4月更文挑战第30天】本文探讨了优化Web性能的关键——HTML和CSS代码压缩与合并。代码压缩通过移除空白字符、注释和缩短标识符减小文件大小,而代码合并则减少HTTP请求。开发者可借助在线工具、构建工具插件、编辑器扩展或手动方式实现压缩和合并。最佳实践中,应保留未压缩备份,测试压缩效果,利用缓存并自动化流程。同时,注意适度优化,避免影响首屏渲染速度。关注新工具和策略以维持网站性能和可维护性。
|
12天前
|
前端开发 JavaScript
使用html+css+javaScript 完成计算器
使用html+css+javaScript 完成计算器
|
15天前
|
前端开发 JavaScript
前端 富文本编辑器原理——从javascript、html、css开始入门(二)
前端 富文本编辑器原理——从javascript、html、css开始入门
26 0
前端 富文本编辑器原理——从javascript、html、css开始入门(二)