Wednesday, 13 August 2008

Minified Javascript and CSS files in netbeans

If you want automated minified javascript and css files in your netbeans generated war files during the build process, read on...

Since netbeans now has a Javascript debugger we want to suppress JavaScript and CSS file compression, it confuses the hell out of the js debugger as you might expect. So I have modified the build.xml from my earlier example to ignore compression when client side debugging is switched on.

So to get automated minified javascript and css files into your war files during the netbeans build process do the following :-
These two files need to go in your netbeans ant\lib folder, for my windows/netbeans 6.5 RC1 installation thats C:\Program Files\NetBeans 6.5 RC1\java2\ant\lib.

For web applications that you want to build with compressed js/css files add the folloing xml to the build.xml for the project, overiding the "-pre-dist" ant target which is not currently configured by default in netbeans.

<target name="-pre-dist" >
<condition property="">
<istrue value="${debug.client}"/>
<antcall target="-do-compression"/>
<target name="-do-compression" unless="" >
<echo level="info" message="Compressing JavaScript and CSS files...." />
<path id="yuicompressor.classpath">
<fileset dir="${ant.home}/lib">
<include name="yuicompressor-x.x.x.jar"/>
<taskdef name="yuicompress" classname="" >
<path refid="yuicompressor.classpath"/>
<yuicompress linebreak="16000" warn="false" munge="no" preserveallsemicolons="true"
outputfolder="${basedir}/${build.web.dir}" >
<fileset dir="${basedir}/web" excludes="/ext-2.1/**/*.js" >
<include name="**/*.js" />
<include name="**/*.css" />
<echo level="info" message="Compression Complete" />

On the line that includes <include name="yuicompressor-x.x.x.jar"/>
replace the x's with the version of the library you are using.

This works for netbeans versions 6.0,6.1,6.5 beta and 6.5 RC1. In 6.1 compression only takes place with debugging configured off, in 6.5 files are not compressed when run in debug mode, which is now a seperate option to 'run' on the toolbar.