A Flex Ant Build: Optimized Modules, Libraries, Runtime CSS, HTML Wrapper, Runtime Images

A common need in a system involving Flex is for the ability to build the Flex portion using Ant. While there are some online examples, there is not one that I have been able to find that does and describes all of the things I typically need to do in Flex . The things which I typically need to do are the following:

• Build optimized modules without having to declare a separate compile target for every module
• Include one or more SWC libraries
• Compile the CSS into a SWF to be loaded at runtime
• Create a custom HTML wrapper, that is also responsible for setting the application endpoint
• Including images to be loaded at runtime
• Uses a properties file to define all the elements

This build also assumes the following:

• There is one source directory called "src"
• Runtime images are somewhere under the source directory
• CSS is somewhere under the source directory
• All modules are in a single directory, that contains nothing but the modules
• You have the Flex ant task JAR in libs
• You have the Ant Contrib JAR in libs
• You have a separate index.template.html for the build that contains ${} variables for the endpoint

For example the following is my example project directory structure:

The build works by executing these targets as part of its default target:

• clean - deletes the deployment directory
• compile - compiles the main application into its SWF
• compile-modules - uses a "for" loop on all the MXML files in the modules directory and calls the "compile-module" target on them
• compile-module - compiles a module into a SWF file, optimized for the main application
• compile-css - compiles the CSS into a SWF
• compile-wrapper - builds the HTML wrapper for the application, and includes the endpoint using FlashVars
• copy-images - Copies runtime images from source into deployment
• clean-up - deletes any generated files

Here are the build files:

• build.properties
• build.xml
• index.template.html