CSS and JS Merging and Minification

31 Aug 2009

We already know that minifying you javascript and css code is good. Even better is merging all those compressed files into one, to save round trips to the server (and of course you'll also want to add appropriate caching headers too).

The YUI Compressor is the best of bunch. I dont really use Java that much, but below is a bash script that semi-automates the install of java and jars. If you use java regularly then you probably have your own system for this.

YUI Compressor only does one file at a time, which is somewhat annoying, but ok. The script below is designed for use in environments where java is not regularly used and makes the merge/minification step more unix-y. At the end of the day, my script is just doing:

#!/bin/sh
cat $@ | java -jar yuicompressor-2.4.2.jar --type css

Example:

$ cat junk1.css



h1 

{
 background:

 blue

}

$ cat junk2.css
h2    {   background:  red  }



$ ./cssmerge.sh junk1.css junk2.css > master.css
$ cat master.css
h1{background:blue;}h2{background:red;}$
$ 

And the source:

#!/bin/sh                                                                       
# Usage:                                                                        
#    cssmerge.sh FILE1 FILE2 > OUTFILE                                            
# PUBLIC DOMAIN -- 31-Aug-2009
# http://blog.client9.com/2009/08/css-and-js-merging-and-minification.html
# Nick Galbreath
#

# Check that java exits, and exits if missing                                   
#  This is for ubuntu.... adjust to taste   
#                                                                               
function check_java {
    JAVA=`which java`
    if [ $? -ne 0 ]; then
        echo "need java -- do " >&2
        # Change as needed                                                      
        echo "sudo apt-get install openjdk-6-jre wget unzip" >&2
        exit 1
    fi
}

# Auto--download the right jar for the YUI Compressor                           
#   http://developer.yahoo.com/yui/compressor/                                  
#   Need to make sure wget,rm,cp,unzip don't emit output                        
#   Needs java                                                                  
function check_compressor {
    check_java

    COMPRESSOR=yuicompressor-2.4.2
    URLBASE="http://yuilibrary.com/downloads/yuicompressor/"

    if [ ! -f "${COMPRESSOR}.jar" ]; then
        echo "${COMPRESSOR} not found, downloading...." >&2
        rm -rf "${COMPRESSOR}*"
        wget -q "${URLBASE}/${COMPRESSOR}.zip"
        unzip -qq ${COMPRESSOR}.zip
        cp -f ${COMPRESSOR}/build/${COMPRESSOR}.jar .
    fi
}
# OUTPUT TO STDOUT                                                              
function merge_css {
    FILES=$@
    check_compressor
    cat ${FILES} | ${JAVA} -jar ${COMPRESSOR}.jar --type css
}

# OUTPUT TO STDOUT                                                              
function merge_js {
    FILES=$@
    check_compressor
    cat ${FILES} | ${JAVA} -jar ${COMPRESSOR}.jar --type js
}

# sample                                                                        
merge_css $@