转载自 mallor
最终编辑 mallor
目录
JSBuilder是一款跨平台的Java应用程序，在项目构建期间，开发者使用它能够定制优化JavaScript。它依赖于简单的JSON配置文件来构建ExtJS项目，当然开发者也可以配置其他资源文件。【译http://www.sencha.com/products/jsbuilder】
JSBuilder2与JSBuilder1相比，增加对CSS资源的支持。
二、使用JSBuilder22.1下载JSBulider2：
下载地址http://www.sencha.com/products/jsbuilder
本页有JSBuilder简介，下载后解压，如图一目录：
图一
1、 JSB2FileFormat.txt：构建项目时JSON配置参数说明，稍后配合例子说明。
2、 JSBuilder2.jar：JSBuilder构建类库。
3、 Readme.txt：执行JSBuilder方法说明，打开后可以看到不同平台用法，如window下：java -jar JSBuilder2.jar --projectFile C:\Apps\www\ext3svn\ext.jsb2 --homeDir C:\Apps\www\deploy\，具体参数稍后解释。
2.2演示项目说明：
本人从最简单构建js说起，建立ExtJS项目，目录结构如图二：
图二
demo目录为项目根目录，src文件夹为ExtJS代码及资源文件等，为演示方便简单建立js、image文件夹。其中，js文件夹存放两个js文件分别为：hello.js和display.js，image文件夹存放图片资源。如下图三、图四：
图三、Js目录内容
图四、image目录内容
为演示方便hello.js和display.js内容非常简单，主要为明白jsbulider使用原理。
hello.js代码如下图五：
图五
display.js代码如下：
图六
可以看到很简单，hello.js输出日志并调用display.js函数，下面这个比较重要就是配置构建JSON配置文件。
2.3配置jsb2文件
在我们使用Ext项目类库文件时，可以看到其中含有一个ext.jsb2格式文件，它就是extjs发布时的构建配置文件，如下图七。
图七
不妨打开看下ext.jsb2文件，如图八，就是一个JSON配置文件，详细说明了Ext构建发布版本是的配置信息。
图八
可以看到就是一个JSON文件。这时，开始我们自己项目的配置文件吧。
1、 新建一个jsb2文件
为了配置方便可直接拷贝一份ext.jsb2文件再上面直接修改，内容如图九：
图九
2、 参数说明：
a) "projectName": "Demo"，为项目名称，可以根据情况自己定义；
b) "deployDir": "demo",为项目根路径名称，对于我们的演示项目就是demo；
c) "licenseText": "Ext JS Library 3.2.1.......",为授权信息，可以不管直接套用ext.jsb2的信息；
d) "pkgs":[{}……]，为构建部署是包配置说明，很重要。从JSB2FileFormat.txt中看到它的值为数组，每个数组又是一个JSON对象，用于配置部署信息。在本例中只放入一个JSON数据,其共有五个属性：
- name: 此JSON数据的说明信息
- file: 生成js文件的路径信息，即生成的js文件叫啥，存放在哪个目录（目录相对于jsb2存放路径），我的jsb2文件放在于demo目录平级，并把目标路径dest目录也与其平级，所以路径应该是”/dest/demo.js”,可以依据情况设置。
- isDebug:是否为调试模式，如果是回生成一个调试文件,类似ext-all-debug.js
- fileIncludes:配置生成的部署文件包含哪些代码文件，也为数组配置格式，有两个属性：-text:包含的js文件名；-path:此js的父目录；可以参照本演示项目配置文件理解。
- pkgDeps: 依赖包配置，还没有研究。
- includeDeps: 是否启用依赖，为布尔值。
e) resources：为配置资源信息配置，本例失败原项目中demo/src/image下的文件部署到目标路径dest/image下，如果需要过滤文件可以配置filters属性，如：
- ".*" A filter to copy all files
- ".*[\\.js|\\.css]" A filter to copy all js and css files.
2.4发布目录结构
生成的jsb2文件存放位置如下，可以对比体会路径信息，路径配置错误执行构建是回发生错误，如图十。
图十
2.5执行构建
在命令行执行如下指令：
java -jar JSBuilder2.jar -p ./demo.jsb2 -d ./dest
- JSBuilder2.jar：为类库
./demo.jsb2：为配置文件
./dest:为执行后文件部署目录
下图十一为执行过程，如配置文件有错回提示错误信息，调整完后在执行。
图十一
2.6部署后信息
下图十二为部署后目录信息：
图十二
可以看到，在dest目录想生成部署目录demo文件夹，并由一个dest目录用户存放部署文件信息，右边为生成文件信息，demo.js为压缩后文件，demo-debug.js为调试文件，image为资源你文件。打开demo.js查看内容图十三：
图十三
打开demo-debug.js查看内容，如图十四：
图十四
对比两个文件可看到：
demo.js（1）把两个文件的内容生成打一个文件中（2）重新对变量进行定义并生成一行的js文件，别人很难看懂你的代码；（3）去掉了代码中的注释；
demo-debug.js只是把两个文件中的代码放在一个文件中，保留原来代码风格，有利于开发调试
OK，终于写完了，就这样了，你有体会到JSBuilder的优势吗？
（1） 多文件合并；
（2） Js文件压缩加密；
（3） 资源文件整合；
http://blog.csdn.net/puppet_love/archive/2011/05/04/6393750.aspx
