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 InfoDownload
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.
netbeans-1

 

 

 
netbeans-21

 

 

 

 

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
eclipse-build-1
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”
eclipse-build-2
6. In the output view observe that the build is running
eclipse-build-3
7. Open the .js and .css files now you should see them minified.

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

10 Responses to “Minify JavaScript and CSS files in IDE – netbeans and eclipse”

  1. Tom Says:

    first of all thanks for the post. looks like the xml code is missing. wordpress might be showing its magic. can u fix it and show us the xml. i need this for a project

  2. Blog and get paid! Says:

    Thank you for posting this, first time I’ve used ant. Great tutorial :)

  3. Smruti Ranjan Says:

    Hi,

    I am following your given steps in Eclipse, It shows Build success but the minification is not happening. I have tried 3 times but no result. Could you please check my steps I have been following and let me know if I am doing any wrong:

    Setp1: Creating Dynamic web project
    setp2: Copied 2 Jar files inside lib folder of WEB INF ( yuicompressor-2.4.2.jar and YUIAnt.jar)
    step3: Creating build.xml in the root of the project and copied mentioned xml snippet in this.
    step4: creating 2 folder i.e js and css inside the web content folder.
    Step5: Placed javascript files and css files in the respective folder.
    Step6: Build.xml run as Ant build. now it shows build successful but when I open the css and js files it is as per the previous source code. No compression happen.

    It will be really helpful if you could guide me to fixing the issue.

    Thanks
    Smruti

  4. Christian Says:

    Thanks man, this worked perfectly for NetBeans.

  5. Dave Says:

    Hi,
    We have the same experience/trouble as Smruti February 19, 2011 at 8:19 am.
    We followed all steps. But eclipe JUNO shows:
    BUILD SUCCESSFUL
    Total time: 63 milliseconds
    But our file are not minified

  6. Redsandro Says:

    Eclipse 3.6/3.7/3.8 has built-in YUI compression, and ANT support can be installed from repositories.
    Could you update the ANT trick for Eclipse so it makes use of built-in YUI compression? I would like to automate this, but you’re the closest thing to someone who knows how that I can find on the internet. :)

  7. Gaurav Gupta Says:

    Netbeans JS CSS Minify plugin available now , download it from here : http://plugins.netbeans.org/plugin/49666/js-css-minify-compress


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: