Minification of JS & CSS files using YuiCompressor

The process of minification includes not only to reduce the size of each of the JS or CSS files to it's bare minimum, hence by reducing the download size. But, also to stitch together multiple JS or CSS files into one JS and one CSS file. Hence reducing the number of HTTP requests made to the server for the appropriate files.


We happened to maintain several files for JS and CSS files and ensured that we used a number of files with some nomenclature like debug.01.file1.js / debug.01.file1.css
Reason, being we needed multiple files for modularization and also as we were using several third party plug-ins.
Another reason, was that ordering of processing the files does matter in some cases ex: jquerymobile js files needs to be preceded by jquery script files.


The final consolidated file will have a name of projectname.js / projectname.css


We used YuiCompressor for minification of js and css files.


Steps to setup:

Yuicompressor downloadable : http://yui.zenfs.com/releases/yuicompressor/yuicompressor-2.4.7.zip

Extract the zip folder to c:\   i.e. c:\yuicompressor-2.4.7

More Info : http://developer.yahoo.com/yui/compressor/

Java runtime download : http://www.java.com/en/download/index.jsp

Setting Environment Variables to Java and Yuicompressor binaries.

Start > My Computer > Properties > Advanced System Settings > Environment Variable >

Append the below string to the PATH variable.

;C:\Program Files (x86)\Java\jre6\bin

type "$(ProjectDir)scripts\debug.*.js" | java -jar "C:\yuicompressor-2.4.7\build\yuicompressor-2.4.7.jar" --type js -o "$(ProjectDir)scripts\okig.mobile.js"

type "$(ProjectDir)styles\debug.*.css" | java -jar "C:\yuicompressor-2.4.7\build\yuicompressor-2.4.7.jar" --type css -o "$(ProjectDir)styles\okig.mobile.css"

Set the Post build event to run the following script. This will ensure that minification is done only in case of release mode. Version is done for both debug & release mode.

if $(ConfigurationName) == Release ( 

echo 'Minifying the JS and CSS'

type "$(ProjectDir)scripts\debug.*.js" | java -jar "C:\yuicompressor-2.4.7\build\yuicompressor-2.4.7.jar" --type js -o "$(ProjectDir)scripts\okig.mobile.js"

type "$(ProjectDir)styles\debug.*.css" | java -jar "C:\yuicompressor-2.4.7\build\yuicompressor-2.4.7.jar" --type css -o "$(ProjectDir)styles\okig.mobile.css"

)