muonlab

Recently I posted about how you can split your CSS up into separate files, and use a NAnt task to combine them on build to aid development.

This can be very useful, but theres still room for improvement.

The YUI Compressor is a brilliant tool to remove whitespace and other bloat from your scripts which take up valuable bandwidth. Combining it with an automated build tool such as NAnt allows you to have all your scripts minified automatically on deployment.

Here are two example build tasks for minifying JavaScript and CSS respectively:

<target name="compress-js">
	<foreach item="File" property="filename">
		<in>
			<items basedir="output/build/assets/javascript/">
				<include name="/**/*.js" />
				<exclude name="/**/*.min.js" />
				<exclude name="/**/*.pack.js" />
			</items>
		</in>
		<do>
			<exec basedir="." program="${JavaPath}java" commandline=" -jar ${YUICompressorPath}yuicompressor-2.4.1.jar --type js --charset utf-8 -o &amp;quot;${filename}&amp;quot; &amp;quot;${filename}&amp;quot;" failonerror="true" />
		</do>
	</foreach>
</target>

<target name="compress-css" depends="combine-css">
	<foreach item="File" property="filename">
		<in>
			<items basedir="output/build/assets/css/">
				<include name="/**/*.css" />
				<exclude name="/**/*.min.css" />
				<exclude name="/**/*.pack.css" />
			</items>
		</in>
		<do>
			<exec basedir="." program="${JavaPath}java" commandline=" -jar ${YUICompressorPath}yuicompressor-2.4.1.jar --type css --charset utf-8 -o &amp;quot;${filename}&amp;quot; &amp;quot;${filename}&amp;quot;" failonerror="true" />
		</do>
	</foreach>
</target>

Using this in combination with my CssCombiner, I achieve an average of 70% compression!

Enoy