Using Juicer on OS X

Juicer is a CSS and JavaS­cript pack­aging tool developed by cjo­hansen. I per­son­ally use Juicer to com­press my mul­ti­tude of nicely format­ted CSS files into one neat min­im­ized file for deploy­ment. This min­im­izes the num­ber of requests made to my serv­ers and speeds up my web­sites. For more inform­a­tion on this visit this page.

First up, I’m going to assume that you’re already run­ning Mac OS X 10.5 (Leo­pard). If not, you’re going to need to first fol­low this bril­liant tutorial on set­ting up Ruby on Rails for both Mac OS X 10.4 (Tiger) and Mac OS X 10.3 (Pan­ther). Even if you are run­ning Mac OS X 10.5, I still recom­mend that you fol­low this tutorial to roll your own Ruby on Rails install­a­tion (how­ever, it is not a require­ment). I also recom­mend that your sys­tem is fully updated ( -> Soft­ware Update).

Now we’re going to go start Ter­minal and run the fol­low­ing com­mand (Ter­minal is avail­able from the Util­it­ies sub-folder of your Applic­a­tions dir­ect­ory): sudo gem install bones juicer. It will likely ask you for your pass­word, which will have to enter to con­tinue the installation.

Next up is to edit your .profile file so that the juicer com­mands will work. Your com­mand promp should already show that you are in your user dir­ect­ory (ComputerName:~ username$), if not then nav­ig­ate to it. If you do not know the basics of using Ter­minal then I recom­mend you visit this help­ful tutorial to get bet­ter acquain­ted. Now that you’re in your user dir­ect­ory you can execute the com­mand vi .profile, and you should see some­thing sim­ilar to this:

export PATH="/usr/local/bin:/usr/local/sbin:/usr/local/mysql/bin:$PATH"

##
# DELUXE-USR-LOCAL-BIN-INSERT
# (do not remove this comment)
##
echo $PATH | grep -q -s "/usr/local/bin"
if [ $? -eq 1 ] ; then
    PATH=$PATH:/usr/local/bin
    export PATH
fi

All we’re going to do is add our path to the end of the file. So press ‘i’ and use the arrow keys to nav­ig­ate to the end of the file. Press ‘return’ a couple of times and then copy and paste the fol­low­ing code:

export PATH="$PATH:/var/lib/gems/1.8/bin"

Now press ‘escape’ and then enter :wq, and press ‘return’ to save and quit. We can now run the next two com­mands in Ter­minal to install YUI Com­pressor and JSLint.

juicer install yui_compressor
juicer install jslint

(Execute them one line at a time). Now we can get on with using Juicer itself, which is as simple as:

juicer merge first.css second.css

This will merge the two CSS files into one single file (first.min.css), which can then be copied onto your server and ref­er­enced instead of the mul­tiple files that you had before. If you wish to see other examples of Juicer than make sure to check out this page.