Thursday, August 05, 2010

YUI Compressor with GUI

Minification is the process of removing all unnecessary characters from source code such as
white space characters, new line characters, comments and block delimiters
without changing its functionality. [read more...]

Minified code reduces the amount of data that needs to be transferred through the web server (bandwidth saving).
It may also be used as a kind of obfuscation.

My favorite minification tool is YUI Compressor.
Mostly for CSS (Cascading Style Sheets) and JS (JavaScript).

Let us taka a look what happen when a simple code get minified.

JavaScript - Original Code

function startTime(){
    var today=new Date();
    var h=today.getHours();
    var m=today.getMinutes();
    var s=today.getSeconds();
    // add a zero in front of numbers<10
    m=checkTime(m);
    s=checkTime(s);
    document.getElementById('txt').innerHTML=h+":"+m+":"+s;
    t=setTimeout('startTime()',500);
}

function checkTime(i){
    if (i<10){
        i="0" + i;
    }
    return i;
}
JavaScript - Minified
function startTime(){var b=new Date();var d=b.getHours();
var a=b.getMinutes();var c=b.getSeconds();a=checkTime(a);
c=checkTime(c);document.getElementById("txt").innerHTML=d+":"+a+":"+c;
t=setTimeout("startTime()",500)}function checkTime(a){if(a<10){a="0"+a
}return a};
CSS - Original Code
body
{
    background-color:#d0e4fe;
}
h1
{
    color:orange;
    text-align:center;
}
p
{
    font-family:"Times New Roman";
    font-size:20px;
}
CSS - Minfied
body{background-color:#d0e4fe;}h1{color:orange;text-align:center;}
p{font-family:"Times New Roman";font-size:20px;}
Just to share here, since YUI Compressor don't provide any GUI, I've created one with Java Swing. It has been compiled together with yuicompressor-2.4.2.jar.
You need to have Java installed in order to run this executable JAR.


Download (MD5 : 210176c93d331c50dc19a2dda0ae1c89 JsCssMin.jar)

0 comments: