Minify JavaScript and CSS files in IDE – netbeans and eclipse

This post talks about how to go about minifying the javascript and css files directly from your IDE (Eclipse and Netbeans) using the YUICompressor and YUIAnt jar files.

Before we look into more specifics you will have to download these two:
1. YUICompression jar from the Yahoo developer site, here are the links : More Info – Download
2. YUIAnt jar file from this link

For Netbeans: (version tested 6.5)

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.

<project name="YUICompression" default="default" basedir=".">
<description>Builds, tests, and runs the project YUICompression.</description>
<import file="nbproject/build-impl.xml"/>

<target name="-pre-dist" >
<condition property="dont.do.compression">
<istrue value="${auxiliary.org-netbeans-modules-web-client-tools-api.clientdebug}"/>
</condition>
<antcall target="-do-compression"/>
</target>
<target name="-do-compression" unless="dont.do.compression" >
<echo level="info" message="Compressing JavaScript and CSS files...." />
<path id="yuicompressor.classpath">
<fileset dir="${build.dir}/web/WEB-INF/lib">
<include name="YUIAnt.jar"/>
<include name="yuicompressor-2.4.2.jar"/>
</fileset>
</path>
<taskdef name="yuicompress" classname="com.yahoo.platform.yui.compressor.YUICompressTask" >
<classpath>
<path refid="yuicompressor.classpath"/>
</classpath>
</taskdef>
<yuicompress linebreak="16000" warn="false" munge="no" preserveallsemicolons="true"
outputfolder="${basedir}/${build.web.dir}" >
<fileset dir="${basedir}/web" excludes="" >
<include name="**/*.js" />
<include name="**/*.css" />
</fileset>
</yuicompress>
<echo level="info" message="Compression Complete" />
</target>
</project>

Make sure to edit the name/version of the jar files being used. You can also choose to set includes and excludes for the files you do not want to minify. Compression only takes place if client side debugging is configured off.

 

When you build and run the project the custom ant task will get called and the minified files will be present in the WAR file that gets deployed.

 

 

 

 

 

 

 

For Eclipse (version tested on 3.3.1/Europa) :

Eclipse build process for the web applications is not exposed directly in the IDE. However its possible to have custom ant build files to run inside of a web application. Taking this approach here is a sample build file for minifying the .js and .css files in the web application.

<?xml version="1.0" encoding="UTF-8"?>
<project name="YUICompression" basedir=".">
<target name="default" description="Minifiy a set of files">
<taskdef name="yuicompress" classname="com.yahoo.platform.yui.compressor.YUICompressTask">
<classpath>
<pathelement path="${basedir}/WebContent/WEB-INF/lib/yuicompressor-2.4.2.jar" />
<pathelement path="${basedir}/WebContent/WEB-INF/lib/YUIAnt.jar" />
</classpath>
</taskdef>
<yuicompress linebreak="16000" warn="false" munge="no" preserveallsemicolons="true"
outputfolder="${basedir}/WebContent">
<fileset dir="${basedir}/WebContent" >
<include name="**/*.js" />
<include name="**/*.css" />
</fileset>
</yuicompress>
</target>
</project>

Steps:
1. Copy over the two jar files into the library (WebContent/Web-INF/lib)
2. Create a new file at the root level of your web app and call it build.xml

3. Paste the above xml snippet into build .xml
4. Edit the version number and/or name of the jar files referenced if needed
5. Right click on the build.xml file and run as “Ant build”

6. In the output view observe that the build is running

7. Open the .js and .css files now you should see them minified.

References used:
Neil’s netBeans Stuff
Minifying JS/CSS