Posted by: edsyrett | 17 October 2008

Build all your stylesheets…every time…

We have a whole bunch of stylesheets in our project.  Unfortunately, our release build had the filenames hard coded in, i.e. it was only building specific stylesheets. So when somebody added new css files, they didn’t get included in the build.  

There must be a way to automatically pick up all the css files and build them, we thought.  And here it is….

This tip relies on the foreach and propertyregexp Ant tasks from the ant-contrib library.  You can download the ant-contrib distro from here.  I found the easiest way to make use of this library is to just copy ant-contrib.jar to your Ant lib directory.

In your build file, simply add the following line, which will enable Ant to access the new tasks:

<taskdef resource="net/sf/antcontrib/antlib.xml"/>

and here’s the interesting bit:

<target name="build-debug">
    <foreach param="filename.css" target="css-build-debug">
            <fileset dir="${basedir}">
                <include name="*.css"/>

<target name="css-build-debug">
    <echo>Building stylesheet ${filename.css} (DEBUG)</echo>

    <!-- Extract the base of the filename, i.e. for c:\Development\tls\...\v1.0\kn.css" we want "kn" -->
    <propertyregex property="basename" input="${filename.css}" regexp=".*\\(.*)\.css" select="\1"/>

    <java jar="${mxmlc.jar}" dir="${basedir}" failonerror="true" fork="true" maxmemory="256m">
      	<arg line="+flexlib='${flexsdk.frameworks.dir}'"/>
	<arg line="${filename.css}"/>
        <arg line="-output 'bin/${basename}.swf'"/>

The <foreach> task is provided by the Ant-contrib library – in this case it iterates through all the files picked out by the <fileset> task and passes them to the target in the property filename.css.

The <propertyregex> task is another one from the Ant-contrib library.  This takes an input property, in this case filename.css,  performs a regex search for a substring, and puts the result back into another property, basename

The clever bit is the actual regular expression – all it really does is extract the filename without the extension from filename.css.  We need this to be able to pass in the name of the output swf.

For those of you who love your regular expressions, here’s a synopsis of how it works:

  • .* – jump over any characters until…
  • \\ – .. you find a backslash.
  • (.*)\.css – Look for as sequence that ends in “.css”, with any characters before it.  Track backwards up to the previous search token (in this case a backslash) and put all the characters between this backslash and the “.css” in a group.
  • The value of the select attribute in the propertyregexp task defines which group is returned and copied to the basename property.
  • …and that’s it….


    Leave a Reply

    Fill in your details below or click an icon to log in: Logo

    You are commenting using your account. Log Out /  Change )

    Google photo

    You are commenting using your Google account. Log Out /  Change )

    Twitter picture

    You are commenting using your Twitter account. Log Out /  Change )

    Facebook photo

    You are commenting using your Facebook account. Log Out /  Change )

    Connecting to %s


    %d bloggers like this: