JSBuilder2使用方法.docVIP

JSBuilder2使用方法 作者：姚亚兵 微博：/yubong 2011-5-3 目录 一、什么是JSBulider 1 二、使用JSBuilder2 1 2.1下载JSBulider2： 1 2.2演示项目说明： 2 2.3配置jsb2文件 2 2.4发布目录结构 5 2.5执行构建 5 2.6部署后信息 5 三、总结 6 一、什么是JSBulider JSBuilder是一款跨平台的Java应用程序，在项目构建期间，开发者使用它能够定制优化JavaScript。它依赖于简单的JSON配置文件来构建ExtJS项目，当然开发者也可以配置其他资源文件。【译/products/jsbuilder】 JSBuilder2与JSBuilder1相比，增加对CSS资源的支持。 二、使用JSBuilder2 2.1下载JSBulider2： 下载地址/products/jsbuilder 本页有JSBuilder简介，下载后解压，如图一目录： 图一 JSB2FileFormat.txt：构建项目时JSON配置参数说明，稍后配合例子说明。 JSBuilder2.jar：JSBuilder构建类库。 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文件。这时，开始我们自己项目的配置文件吧。 新建一个jsb2文件 为了配置方便可直接拷贝一份ext.jsb2文件再上面直接修改，内容如图九： 图九 参数说明： projectName: Demo，为项目名称，可以根据情况自己定义； deployDir: demo,为项目根路径名称，对于我们的演示项目就是demo； licenseText: Ext JS Library 3.2.1.......,为授权信息，可以不管直接套用ext.jsb2的信息； 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: 是否启用依赖，为布尔值。 resources：为配置资源信息配置，本例失败原项目中demo/src/image下的文件部署到目标路径dest/image下，如果需要过滤文件可以配置filters属性，如： - .* A filter to copy all files - .*[\\.js|\\.css] A filter to copy all