Ben Sternthal & Friends

A few days ago one of our programmers asked minimizing our CSS/JS . I figured this was a good exercise as I would want to integrate this into our ANT build process.

Why integrate into ANT?

Because having developers worry about formatting/unformatting CSS/JS is just a pain in the ass and not good for anybody.

By doing this in ANT the developer does not have to worry about anything…at all. Whenever a build is made to QA or Production.. whooosh everything gets minimized.

To do this I am making use of the YUICompressor library. It’s very well documented.. which helps. For more details you may also read this blog http://www.julienlecomte.net/blog/index.php?s=YUI+Compressor.

CSS Minification

The overall strategy for CSS minification is to tell YUI where our css files are and to minimize all of em.

For CSS our code starts out like this:

body {
   margin:0 0 0 0;
   font-size:10px;
}

After minimizing it looks like this:

body{margin:0 0 0 0;font-size:10px;}

You can do a lot more complicated stuff but for us this is all we need. Here is what the ANT task looks like

 
<target name="css.minify">
	<apply executable="java" 
          parallel="false" 
	       dest="${temp.dir}/htdocs/front/resources/css/">
	<fileset dir="${temp.dir}/htdocs/front/resources/css/" 
	         includes="*.css"/>
	<arg line="-jar"/>
	<arg path="lib/yuicompressor-2.4.2.jar"/>
	<arg line="--line-break 0"/>
	<srcfile />
	<arg line="-o"/>
	<mapper type="glob" from="*.css" to="*-min.css"/>
	<targetfile />
	</apply>
	<!-- Replace Existing CSS -->		                           		
	<move todir="${temp.dir}/htdocs/front/resources/css/" overwrite="true">
	<fileset dir="${temp.dir}/htdocs/front/resources/css/" />
	<mapper type="glob" from="*-min.css" to="*.css"/>
	</move>		
</target>

So basically we tell ant where the source files are and where it should store the processed files. A neat trick is to specify a folder and look for all .css files as I have done.

We use the executable command to run the yuicompressor jar as if it was on the command line. And we basically say “remove all line breaks”.

Now the only thing i dont like is that I name the processed files -min.css then do a seperate move to rename them and over write the old files.

It looks like there is a mapper that should do this in place, but I was unable to get this to work.

I’ll post the JS minification in a followup.

ben startup, tech