Posts Tagged css

One of the “no brainer” ways to make your web sites / web apps load faster for users is to utilise Javascript and CSS compression.

This means at least, stripping out all the white-space, comments and other non-essential character data from your files, but can also mean code compression / obfuscation as well.

One of the best tools for this task is Yahoo’s YUI Compressor, which does a fantastic job of compressing down both .js and .css files.

Better yet, it is very easy to automate this compression process as part of your Ant build process for a standard Java web application.

Read on for the details…

We’ll need a couple of add-on JAR libraries; firstly (and most obviously), YUI Compressor, which is available from Yahoo as a single JAR which can be placed into our “lib/” folder of our web project (or similar location – I will assume lib/ for now).

Secondly we will need an add-on task for Ant in the ant-contrib project which allows us to iterate the file system, performing tasks (the <foreach> task). Note, that the sourceforge site for the ant-contrib project is a little confusing, you may have to view “all downloads” to find the actual ant-contrib JAR download.

Again place this download in the lib/ folder of the web project.

Now we can change our build file to compress…

    <taskdef resource="net/sf/antcontrib/antcontrib.properties">
        <classpath>
            <pathelement location="lib/ant-contrib-0.6.jar"/>
        </classpath>
    </taskdef>

    <target name="yuicompress"
            description="Compresses a CSS or JS file using YUI compressor">
        <java jar="lib/yuicompressor-2.4.2.jar" fork="true">
            <arg value="-o"/>
            <arg value="${yuicFile}.comp"/>
            <arg value="${yuicFile}"/>
        </java>
        <move file="${yuicFile}.comp" tofile="${yuicFile}"/>
    </target>

    <target name="-post-compile">
        <foreach target="yuicompress" param="yuicFile">
            <path>
                <fileset dir="build">
                    <include name="**/*.js"/>
                    <include name="**/*.css"/>
                </fileset>
            </path>
        </foreach>
    </target>

The key task to invoke is the “-post-compile” task. This is based off a standard Netbeans web project build.xml, but you can use this in a free-form build.xml just as easily by calling the -post-compile target as a dependancy of your packaging / WAR target.

Essentially after the build step and prior to WAR packaging we compress in-place the .CSS and .JS files in the build folder. The nice thing about this approach is that we can work on human-readable CSS and Javascript in our IDE but deploy compressed content automatically. There is no need to maintain a “myCode.js” and “myCode.min.js” and you can even work with the “non-minified” versions of your favourite API should you wish to as well.

Yahoo!