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"

)

Code analysis using SharpLinter

SharpLinter is a command line tool to automate error-checking Javascript files. It produces output that is formatted for Visual Studio's output window, so clicking on a line will locate the file and line in the IDE.


This helps you correcting from common mistakes, assumptions we make about JavaScripts.


One example, is there are some implicit conversions of types ex: null can be 0 or "" or false, undefined is some cases. Hence, when you are doing a comparison you may encounter wrong conditions.
JSLint recommends using === / !== instead of == / !=


Error console shows output as below.
 (lint) Use '===' to compare with 'null'. at character 14
 (lint) Missing radix parameter. at character 14
 (lint) Use '!==' to compare with 'null'. at character 42
 (lint) Use '!==' to compare with 'null'. at character 14


I used the following options.
$(ProjectDir)\Assemblies\SharpLinter\SharpLinter.exe
-v -y  -rf "$(ProjectDir)scripts\*.js"


jslint.global.conf
/*jslint 
browser: true, 
sloppy: true, 
nomen: true, 
plusplus: true,  
forin: true, 
type: true, 
windows: true, 
laxbreak:true
jslint*/


You can find more information in https://github.com/jamietr