YUI: Local Combo Handler

Note: Before I start, it should be noted that my server is not under my control so I can't tweak it to serve these files faster. So the examples may load a little slow.

This guide will help you install a local combo handler instance that will work with YUI 2.6.0.

We will be using an Open Source project called Minify to handle our combo files.

Minify is a PHP5 app that can combine multiple CSS or Javascript files, compress their contents (i.e. removal of unnecessary whitespace/comments), and serve the results with HTTP encoding (gzip/deflate) and headers that allow optimal client-side caching. This helps you follow several of Yahoo!'s Rules for High Performance Web Sites.

Setup Minify

First we need to download the minify source here and unzip it. You will see a list of files and directories like this:

HISTORY.txt
LICENSE.txt
README.txt
UPGRADING.txt
min/
min_unit_tests/

We need to move the min directory to the root of the webserver and rename it combo.

sudo mv min /var/www/combo

Now edit the default config file and change a few options:

vim /var/www/combo/config.php

Update the following options:

Now minify should be installed and operational.

Setup the library code

First create a place in the webroot to store your library files:

sudo mkdir /var/www/lib

Now download the YUI 2.6.0 release here and unzip it. You will see a list of files like this:

README
as-docs/
as-src/
assets/
build/
docs/
examples/
index.html
tests/

Now create a directory under lib called 2.6.0.

sudo mkdir /var/www/lib/2.6.0

Now move the build directory inside the lib/2.6.0 directory.

Setting up YUILoader

Now configure the YUILoader to fetch it's files from the local combo handler instead of the default one.

First load the local copy of the YUILoader from our webroot.

The final step is to configure YUILoader use the local combo handler.

There are 3 main options that need to be configured: comboBase, filter and skin

comboBase: This needs to be set to the local handler: /combo/?b=libs&f=

filter: YUILoader uses an & to separate the URL pieces, but minify expects a , so we need to apply a filter that replaces all & characters with a ,

skin: This is needed for skinning, minify has a tough time with relative file paths in a CSS file, this option tells YUILoader to rollup skin files. This way we get the full skin with good relative paths.

Example config

Example Page

Page loading YUI 2.6.0 from a local handler