Compressing Javascript files in netbeans 6.1 - A solution

OK, I have a working solution for netbeans 6.1, I can not take any credit for this as my hunch was correct, it has been done before. I have adapted the work done by Philippe Mouawad and ANDREW GOMILKO using the YUI Compression tool as Ant Task so that it can be used with netBeans 6.1 web application projects.

To get automated javascript \and css files into your war files during the netbeans build process do the following :-

• Download the YUI Compression Lib making sure you abide by the terms of the licence agreement.
• Download the YUIAnt.jar , this is the ant task required, see this page for information.

These two files need to go in your netbeans ant\lib folder, for my windows/netbeans 6.1 installation thats C:\Program Files\NetBeans 6.1\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">
<echo level="info" message="Compressing JavaScript and CSS files...." />
<path id="yuicompressor.classpath">
<fileset dir="${ant.home}/lib">
<include name="yuicompressor-2.3.5.jar"/>
</fileset>
</path>
<taskdef name="yuicompress"
 classname="com.yahoo.platform.yui.compressor.YUICompressTask">
<classpath>
<path refid="yuicompressor.classpath"/>
</classpath>
</taskdef>
<yuicompress linebreak="300" 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" />
</fileset>
</yuicompress>
<echo level="info" message="Compression Complete" />
</target>

This will compress and copy the js and css files to the build directory before the war file is built and will thus be included in your war file.

Note there is a line in my example with an "exclude" for my ext-2.1 directory, the files there are already compressed so i have excluded them, just add/remove to suit your application.

The payload without compression on my current project is 880kb after compression 620kb, and has shaved a couple of seconds off the browser load time too.

All we need now is for someone to code a netbeans plugin that configures this all for us and makes it configurable from a wizard maybe, any takers ?

I have also stumbled upon this excellent nb6.1 plug-in for pl/sql editing be sure to check it out if you want to edit pl/sql from within netbeans.

Happy coding....

Compressing Javascript files in netbeans 6.1

After reading the ant manual and contemplating this further I couldnt help thinking that someone might have already built an ant task to do this.

A quick google search yielded several interesting results:-

• http://blog.tremend.ro/2006/10/25/ant-task-for-javascript-compression/
• http://code.google.com/p/jsmin-ant-task/
• http://javaflight.blogspot.com/2008/01/introducing-yui-compressor-ant-task.html

According to YUI Compressor pages, it is JavaScript minifier designed to be 100% safe and yield a higher compression ratio than most other tools including JSMin.

I am going to have a go at modifying an ant task to use the YUI Compressor and add it to a test web app build script in netbeans.

There are step by step instructions on how to create the ant script on slideshare here.

Compressing Javascript files in netbeans 6.1

Netbeans 6.1 Javascript editor has some fantastic features and is my editor of choice, however it has a feature missing I would like to see implemented.

Background
I have recently been the lead developer on a corporate time sheet web application developed using netbeans and the excellent Extjs library front end, Java middle tier with an Oracle backend database.

The company I work for has a global presence around the world and some countries have less developed network infrastructure with often narrow bandwidth and slow links.

To let the users in these countries get the best from my web applications it was deemed necessary to compress/minify script files, in my case Javascript and may be good practice.

Avoiding Re-inventing the Wheel
There are a variety of tools available to do this, however it is an extra manual step in the build process which could quite easily be prone to error and being able to do it as part of the build process automaticlly would be a great enhancement to netbeans build process especialy where a project contains many javascript files.

So I have made a suggestion as an enhancement request. The idea is to compress script files during the netbeans build process so that war files only contain compressed javascript leaving the editable source intact.

Investigating the nb build process
With some spare time today, knowing nothing about the actual build process in netbeans I decided to investigate a solution myself.

So this is what I have ascertained to date in a couple of hours :-

• netbeans uses ant build scripts to do the actual building process.
• you can write your own ant tasks.
• each netbeans project has its own build script.
• The build script contains place holders for pre/post build and distribution ant tasks.

So whats the solution then?

• Learn how to build ant tasks and hook them into build.xml for my projects.
• Build an ant task that compresses javascript files. (easy in Java)
  
• Set up the build script so that it runs during the build part of the process but before the distribution part so that compressed javascript files are included in the war file.
• Share the solution with the nb community.
  

Doing this will leave the readable source intact and editable from within netbeans or your source code control such as cvs etc and provide compressed javascript files in your web applications.

OK, there must be some down side to this too. From my point of view:-

• I have to spend the time learning ant (not really a downer for me) time is though....
• Debugging might be an issue if the source is actually modified on the fly during building.
• I know nothing about configuring netbeans so compression could be switched off etc.

watch this space for a working solution.....