[ADC文章]使用 Flex Ant Tasks 构建 Flex 项目-第 I 部分:为 Flex 创建构建脚本(转载)

这是一篇来自Adobe开发者中心的文章,原文地址是:http://www.adobe.com/cn/devnet/flex/articles/flex_ant_pt1.html

与其他开发人员在团队环境中合作时,必须并且最好实现应用程序构建流程的标准化。大多数大型企业项目借助源控制和自动化工具,使整个团队能使用相同代码并跟踪大量软件修订版,同时制作可重复的构建。许多 Java 开发人员使用 Ant 构建脚本实现新发行版的构建流程。

当企业项目的新构建需要 Flex 应用程序的新发行版时,工作可能会变得忙碌起来。为发行版移交实际 SWF 文件是谁的工作?未来构建呢?作为 Flex 开发人员,您可能会吃惊地发现可以使用 Adobe Flex Ant Tasks 构建使用 Ant 的项目。

您 可以使用 Flex Ant Tasks 创建脚本,它可以使您的项目构建流程快速、无痛并且可重复。此外,如果您的团队中有 Java 开发人员和 Flex 开发人员,Java 开发人员可以调用构建脚本作为自己构建的一部分,从而获得您的 SWF 文件的最新版。由于构建不再单独依赖于一位开发人员从 Flex Builder 部署 SWF 文件,它为其余团队成员部署应用程序提供了更大的灵活性。

在本文中,我将向您展示如何为典型的 Flex 项目创建基本构建脚本。有关 Java Ant Tasks 的更多信息,请参阅本文末尾后续工作部分中的链接。

要求

为了充分利用本文,您需要以下软件和文件:

Flex Builder 3

范例文件:

必备知识

需要具备 Flex 3 的基础知识以及面向对象的编程原则的实战知识。通过命令提示编译 Flex 应用程序的知识不是必需的,但会很有帮助。

关于作者

Dave Flatley 是 PXL Designs, LLC 的总裁/首席技术官。他在纽约市区从事 Web 开发人员咨询工作已有九年多,侧重于 Flash Player 和其他相关的 Web 技术。在他的职业生涯中,Dave 曾为 Intel、Fidelity、Fleer、Redmond Software、DRS Technologies、Merrill Lynch 和 Selective Insurance 等公司开发过 Web 和桌面应用程序。

什么是 Flex Ant Tasks?

Ant (Another Neat Tool) 是一种脚本编写工具,可以使用它为项目创建自动化构建流程。它起初是为 Java 项目创建的。它使用基于 XML 的语法列出脚本文件中的目标和依赖性,并从命令提示调用脚本。

可 以将目标视为“任务”。任务示例包括编译 Flex 应用程序、创建或删除目录、甚至是调用 ASDoc 工具为项目创建文档。使任务依赖于先运行的其他任务,就可以将多个任务串成一个链。示例包括,提出一个创建目录的任务,然后创建另一个任务,通过编译 Flex 应用程序在该目录中生成 SWF 文件。

以下是一些任务的简要列表,您可以将它们添加到脚本中以实现构建流程自动化:

  • 编译 Flex 应用程序、模块和组件库
  • 使用 ASDoc 创建项目文档
  • 为项目的输出 SWF 文件创建 HTML 打包程序

Flex Ant Tasks 包括 mxmlc 和 compc 编译器任务,它们扩展了 Java Ant Tasks。因此,您可以根据需要使用 Java Ant Tasks 的任何可用属性。

如何使用 Flex Ant Tasks?

首先您需要安装 Ant。您有两个选择:以 Flex Builder 插件形式安装 Ant 或以独立应用程序形式安装 Ant

以 Flex Builder 3 插件形式安装 Ant

如果您使用 Flex Builder,可以从 Eclipse 项目更新安装 Ant 插件。

在 Flex Builder 中,选择“帮助”>“软件更新”>“查找并安装”。选择“搜索要安装的新增功能”,然后单击“下一步”。确保在“更新站点”视图中已勾选“Eclipse 项目更新”站点,然后单击“完成”。

选择下载所使用的镜像站点,然后单击“下一步”。选择“Eclipse 项目更新”,并搜索您的 Eclipse SDK 版本。在这个条目下,选择“Eclipse Java 开发工具”(或 JDT)。

接受协议,单击“下一步”,然后单击“完成”。Flex Builder 将下载 Java 开发工具的文件。下载完成后,单击“安装全部”。

重新启动 Flex Builder 并选择“窗口”>“其他视图”>“Ant”,您可以在 Flex 开发透视中看到 Ant 视图和其他窗口。

安装独立 Ant

注意:如果您不习惯使用命令提示编译 Flex 应用程序,应当可以使用 Ant 插件配置。

另一种方法是安装 Apache Ant 并使用命令提示编译应用程序。如果要以独立工具形式安装 Ant,请访问 Apache Ant 项目页面*以下载最新发行版,并将 ZIP 文件解压缩到您的机器上。撰写本文时,Ant 的最新版本是 1.7.1。

要在 PC 上安装 Ant,可以将解压缩的文件夹放在 C:\apache-ant-1.7.1 中。对于 Mac,最佳位置是 Applications 文件夹。我将这个文件夹称为 Ant 根目录或 {ant_root}。

重要:现在已安装 Ant,但在运行它之前,您需要定义一些环境变量,其中包括 ANT_HOME,它应当设置为 Ant 的安装目录。有关更多信息,请参阅 Apache Ant 文档*

Ant 安装并运行就绪后,您需要访问 Adobe Flex Ant Tasks。默认情况下 Ant 不知道 Flex 是什么,所以您要介绍它们。

安装 Flex Ant Tasks

您需要获得一份 flexTasks.jar 文件,它包含 Adobe 创建的 Flex Ant Tasks。如果已安装 Flex Builder 3,请从以下目录 {flex_builder_3_install_folder}\sdks\{your_sdk_verion_number}\ant\lib将 flexTasks.jar 文件复制到 {ant_root}\lib 目录。

如果使用独立 Flex SDK,您可以在以下目录中找到 flexTasks.jar: {flex_sdk_root}\ant\lib\。将它从该目录复制到您的 {ant_root}\lib 目录。

现在可以开始构建 Ant 脚本,它们将充分利用 Flex Ant Tasks。

在 团队环境中,最好将 flexTasks.jar 包含在项目中,因为开发人员的机器上不一定有该文件。处理大型企业项目时,可以将 flexTasks.jar 复制到项目的 lib 文件夹中。这样,您可以将 Flex Ant Tasks 分发给没有该文件的开发人员,他们还可以根据需要在编译时将该 JAR 文件的引用作为变量传递给 Ant。为了保持本文的简洁性,将 JAR 文件添加到 Ant 安装更简单一些。

设置项目

下载并解压缩本文的范例文件后,启动 Flex Builder 3,新建一个名为 flex_ant_pt1_Tasks 的项目,并将项目位置设置为 Flex Ant Tasks 目录。Main.mxml 是这个简单应用程序的入口点,它位于 src 目录中(请参阅图 1)。

图 1.flex_ant_pt1_Tasks 项目目录结构

项目可以运行后,您将看到一个简单的应用程序,它只会创建一个 Label 组件并从 com.pxldesigns.flexTasks.LabelBuilder 类检索字符串值。运行它,就可以在应用程序中看到如图 2 所示的 Label。

图 2.这是运行该应用程序时应该看到的效果。令人吃惊,不是吗?

构建属性文件

您可能已经注意到项目主文件夹中的 build.properties 和 build.xml 文件。这些文件不在“src”文件夹中,因为它们用于您的 Ant 构建脚本。

我们首先检查一下 build.properties 文件。右键单击 build.properties 文件,选择“打开方式”>“属性文件编辑器”或“打开方式”>“文本编辑器”。

您 通常在这个文件中定义 Ant 脚本将使用的项目的属性(build.xml 文件)。虽然文件本身不是必需的,但长久而言它可以使事情更简单。通过将某些路径变量、文档标题和其他变量存储在单独的属性文件中,其他开发人员的操作可 以更省心,因为他们不一定像您那样在机器的同一位置安装了所有工具和 SDK。

范例文件中的 build.properties 文件包含以下内容:

  1. # change this to your Flex SDK directory path
  2. FLEX_HOME=C:/Program Files/Adobe/Flex Builder 3/sdks/3.2.0
  3.  
  4. # this points to your project's src directory
  5. # {$basedir} is a default variable that can be used in any Ant
  6. script
  7. # and it points to the project's root folder [ flex_ant_pt1_Tasks ]
  8. in this case
  9. SRC_DIR =${basedir}/src
  10.  
  11. # points to the project's libs directory
  12. LIBS_DIR =${basedir}/libs
  13.  
  14. # this is the folder we want to publish the swf to
  15. DEPLOY_DIR = ${basedir}/DEPLOY

您会发现 build.properties 文件的第一行中有一个注释,它以“#”开头:

  1. # change this to your Flex SDK directory path
  2. FLEX_HOME=C:/Program Files/Adobe/Flex Builder 3/sdks/3.2.0

FLEX_HOME 变量是 Flex Ant Tasks 必需的,并且应当指向您的 SDK 版本的文件夹(以上是 PC 上的典型位置)。如果您使用 Mac,典型位置如下:

  1. FLEX_HOME=/Applications/Adobe Flex Builder 3/sdks/{your_sdk_version}

这个文件中还列出了一些其他变量。无需在那里列出它们,它们可能是在 build.xml 文件中创建的,但是为了提高灵活性,最好将它们包含在这个属性文件中。

SRC_DIR 变量指向 Flex 项目的 src 文件夹,LIBS_DIR 变量指向项目的 libs 文件夹。这相当明显,但您可以随意命名这些变量,可以设置一些路径变量供构建脚本参考。

还有一个 DEPLOY_DIR 变量,它指向 DEPLOY 文件夹,您的脚本在运行时将创建这个文件夹。

您已经看过 build.properties 文件,它其实只是一个定义一些指向工具和 SDK 的路径的存储文件,并且可以包含一些其他变量,如用于创建 ASDoc 的标题和表尾等。等式的下一个部分是实际 Ant 构建脚本。

创建构建脚本

按照惯例,您应当将属性文件和构建脚本分别命名为“build.properties”和“build.xml”,将它们存储在项目的主文件夹中,以便告诉其他开发人员哪里可以找到它们以及它们是什么。您会希望遵循这个命名惯例,以便与其余开发人员保持一致。

在 Flex Builder 中,通过以下操作打开 build.xml:右键单击该文件并选择“打开方式”>“Ant 编辑器”或“打开方式”>“文本编辑器”。如果您安装了 Ant 插件,Ant 编辑器会提供代码颜色和提示。

您首先会发现这是一个标准 XML 文件。Ant 对您提供的 XML 文件进行语法分析,以便运行您指派的所有任务。以下是近距离观察效果。

  1. <project name="Flex Ant Tasks Build Script" default="compile flex project">
  2.  
  3. <!-- load previously defined configuration properties file -->
  4. <property file="build.properties" />
  5.  
  6. <!-- points to our flexTasks.jar we copied to the libs folder to distribute with the project -->
  7. <taskdef resource="flexTasks.tasks" classpath="${basedir}/libs/flexTasks.jar"/>
  8.  
  9. <!-- delete and create the DEPLOY dir again -->
  10. <target name="init">
  11. <delete dir="${DEPLOY_DIR}" />
  12. <mkdir dir="${DEPLOY_DIR}" />
  13. </target>
  14.  
  15. <!-- Build and output the Main.swf-->
  16. <target name="compile flex project" depends="init">
  17. <mxmlc file="${SRC_DIR}/Main.mxml" output="${DEPLOY_DIR}/Main.swf">
  18. <load-config filename="${FLEX_HOME}/frameworks/flex-config.xml"/>
  19. <source-path path-element="${FLEX_HOME}/frameworks"/>
  20. <compiler.debug>false</compiler.debug>
  21. </mxmlc>
  22. </target>
  23.  
  24. </project>

第一行包含一个 project 元素,并且 name 属性值为“Flex Ant Tasks Build Script”。您可以将它随意命名。default 属性指向该文件稍后部分中定义的默认 target 节点。这里,它设置为一个名为“compile flex project”的目标。您会想起目标只是分开的任务。

下一行代码定义了一个 property 元素。它只是导入 build.properties 文件。

  1. <property file="build.properties" />

下一个元素是一个 taskdef,它包含名为 resource 的属性,该属性指向 flexTasks.tasks。classpath 属性指向您的 {basedir}/libs/flexTasks.jar 文件。这是 Adobe 提供的 JAR 文件,它包含 Flex Ant Tasks。出于本文需要,您将它复制到项目的 libs 目录中。

如 果您准备分发项目,请包含这个 JAR 文件以确保其他团队成员可以构建您的项目。如果他们未与 Ant 副本一起安装这个 flexTasks.jar,他们在调用您的脚本时,需要在命令提示中使用 Ant 的“- lib”选项将引用传递到该文件。我将在本文稍后部分中讨论这个问题。

此时 Ant 知道哪里可以找到用于 Flex 项目的 Adobe Flex Ant Tasks,您可以开始创建脚本要执行的实际任务。

将任务添加到脚本中

构建脚本 (build.xml) 中的下两个节点是名为“init”和“compile flex project”的 target 节点(请参阅图 3)。“compile flex project”target 的 depends 属性设置为 init。将 project 元素的 default 属性设置为“compile flex project”目标使它(构建 Flex 应用程序)成为构建脚本要处理的主任务。这个 target节点的 depends 属性告诉 Ant“在你运行我依赖的任务之前,不必运行我”。

让我们来看看名为“init”的 target,您会发现它内部嵌入了两个简单元素。delete 和 mkdir 节点只是告诉 Ant 删除 DEPLOY 文件夹(如果它存在于 base 目录中),并使用 mkdir 命令重新创建它。这是确保环境整洁、就绪的好方法。

ss

图 3.构建脚本中的 target 元素是单独“任务”

由于“compile flex project”目标依赖于“init”目标,所以“init”将首先运行。您已经将这两个目标串在一起,逐个运行。

“compile flex project”目标节点中的 mxmlc 节点属于 Adobe Flex Ant Tasks 项目。它告诉 Ant 将这些命令发送到 mxmlc 应用程序编译器,在您运行该脚本时实际构建项目。file 属性指向 Main.mxml,它是项目的入口点,output 属性将 DEPLOY_DIR 变量以及您希望 SWF 文件拥有的名称一起使用(此处为 Main.swf)。

命令与您在命令提示中用于 mxmlc 编译器的命令相同,它们将您输入的值传递到您的 XML 文件中。您可能比较熟悉以下的大多数内容;只是由于 Ant 语法的关系,所以写得略有不同而已。

mxmlc 节点中剩余的三个节点载入 flex-config.xml 文件,设置并指向 Flex 框架,并禁用产生的 SWF 文件的调试输出。这是一个简单构建脚本,所以目前选项并不多。但是,您可以像之前使用 mxmlc 命令提示并将变量传递到编译器那样添加许多其他选项。在本文的第二部分中,我将讨论扩展和增强构建脚本的更多选项。但是,眼前的任务是借助基本构建脚本提 速。

您现在已了解使用 Flex Ant Tasks 的 Ant 构建脚本的基本结构,我们来看看它是如何运行的。

运行 Ant 构建脚本

可以通过几种方式执行 Ant 构建脚本。如果您使用带有 Ant 插件的 Flex Builder 3,只需将 build.xml 文件拖放到 Ant 视图中即可。首先,选择“窗口”>“其他视图”>“Ant”,确保打开视图。将 build.xml 文件拖到视图中,然后双击“Flex Ant Tasks Build Script”(您之前设置的标题)旁的 Ant 图标。

也可以右键单击 build.xml 文件,然后选择“运行方式”>“1 Ant 构建”。或者展开“Flex Ant Tasks Build Script”并双击“compile flex project [default]”任务。如果使用 Flex Builder,您可以运行脚本中的单独任务,如图 4 所示。

ss

图 4.Eclipse 项目站点中的 Flex Builder 的 Ant 视图插件

如果要使用 Ant 编译脚本,您可以启动一个命令提示,导航到您的 flex_ant_pt1_Tasks 文件夹(其中包含 build.xml 文件),键入“ant”并按“Enter”。使用 Ant 但无法访问 flexTasks.jar 的开发人员可以使用 -lib 变量从命令行调用 Ant,如下:

  1. ant -lib ${basedir}/libs/flexTasks.jar

如果一切顺利,您可以在命令提示窗口或 Flex Builder 的控制台视图中看到如下输出:

  1. Buildfile: C:\My Projects\flex_ant_pt1_Tasks\build.xml
  2. init:
  3. [delete] Deleting directory C:\My Projects\flex_ant_pt1_Tasks\DEPLOY
  4. [mkdir] Created dir: C:\My Projects\flex_ant_pt1_Tasks\DEPLOY
  5. compile flex project:
  6. [mxmlc] Loading configuration file C:\Program Files\Adobe\Flex Builder3\sdks\3.2.0\frameworks\flex-config.xml
  7. [mxmlc] C:\My Projects\flex_ant_pt1_Tasks\DEPLOY\Main.swf (179185 bytes)
  8. BUILD SUCCESSFUL
  9. Total time: 6 seconds

该脚本还在项目的主文件夹中创建了一个 DEPLOY 目录,您可以在其中找到 Main.swf 文件。如果收到错误,您需要验证 build.properties 文件中的所有路径是否正确无误。

将构建脚本用于企业应用程序

处理企业项目时实现构建和部署流程自动化的重要性现在应该更明显了。构建脚本的关键因素是保持流程:

  • 简洁明了
  • 可重复
  • 可供团队的目前和未来成员轻松使用

借助 Flex Ant Tasks,您可以将这个构建流程融入任何项目中。通过将路径和其他变量保留在属性文件中并将构建脚本限制在构建所需的最基本的功能,您将为团队中的所有开发人员创建一个简洁、易用的流程,当他们需要根据您的代码部署 SWF 文件时可以使用它。

后续工作

在本文中,我谈到了如何使用 Adobe Flex Ant Tasks 设置、创建和执行一个十分基础的 Ant 构建脚本。在下一篇文章中,我将加入一些更常见的任务,如创建 ASDoc 和 HTML 打包程序、使用和部署 RSL 等等。

您可以使用以下链接和资源进一步了解 Ant 和 Flex。

您给予的分值: None 平均分: 9.3 ( 3 票)

发表新评论

  • 网页地址和电子邮件地址将会被自动转换为链接。
  • 行和段被自动切分。
  • 您可以使用下面的标签来高亮显示您的评论内容: <code>, <blockcode>. 可以使用"[foo]".旁边显示标签样式 "<foo>" PHP代码可以用这样的区块来包含<?php ... ?> or <% ... %>

更多格式化选项信息

验证区域
系统验证:请回答下面的问题