We could do all this from the very start of developing a new project, but this introduces great pain into the development process. It’s nigh on impossible to debug combined code compressed to a single line of text, and a massive headache to manage and work with in multi-developer situations under revision control. So, in this case, compression and combining—“combressing” perhaps!—should always take place just before code is put into a production environment, leaving development with fully commented, uncompressed code. Thus ‘combressing’ (I’m going to patent it) should be scripted so that it’s a simple one-click process to push these special live-only assets to live servers.
- Combine files to a single file
- Compress files using our method of choice
- Configure our webserver to send the files gzipped
- Modify the codebase to make development easier
The first step, combining, is a simple process. On Linux boxen, we use the
cat command and on Windows we can use the
copy command. Both are roughly equivalent commands. Note that the process is identical for both CSS and JS, bar the file extension.
Combining on Linux (.sh)
We con_cat_enate all files together at once and push the output to one file ‘tmp.js’.
|0006||cat $JSDIR/mootools-1.2-core.js \|
|0009||$JSDIR/common.js > $JSDIR/tmp.js|
Combining on Windows (.bat)
copy each file on to the previous and push the result to one file ‘tmp.js’. Note that each line must copy the previous tmp.js to the next file, and then save to tmp.js again. As ever, Windows makes life overtly verbose for the developer.
|0002||copy/b %folder%\mootools-1.2-core.js %folder%\tmp.js|
|0003||copy/b %folder%\tmp.js + %folder%\functions.js %folder%\tmp.js|
|0004||copy/b %folder%\tmp.js + %folder%\common.js %folder%\tmp.js|
The following commands are from a Linux script, but are identical for Windows except directory slashes should be \.
|0002||java -jar ./assets/yuicompressor/yuicompressor.jar --type js -o $JSDIR/combined.js $JSDIR/tmp.js|
Compressing CSS requires just a change to the
|0001||# Compress the combined CSS|
|0002||java -jar ./assets/yuicompressor/yuicompressor.jar --type css -o $CSSDIR/combined.css $CSSDIR/tmp.css|
At this point there should be two files, a
combined.css and a
combined.js, You should note a marked difference in file size between the uncompressed files and the finished version.
Reducing Bandwidth Consumption with gzip
Naturally this comes with a little bit of processing overhead as it’s performed on-the-fly, so beware of using it on everything. It’s somewhat of a topic all of its own, so I’d like to point you towards my del.icio.us gzip+compression page, which will be updated with the most useful resources I find on the subject. Currently the best reading is at:
Easing the Pain of Development
How can we make this easier to deal with? Is there one fire-and-forget method for this? The answer is no. In my experience, the best practice is twofold:
- Script the combining and compressing, and make it part of your deployment process. On personal projects I use a simple bash script and run it while my FTP client fires up. While professionally it’s employed into the build processes, and checked for errors (yui compressor returns parser errors).
- Modify your web site/app code so that it conditionally loads the CSS based on the hostname or some other flag indicated by the environment/configs.
By example, I’ve modified my Textpattern templates here to conditionally load CSS based on the hostname aided by the aam_if_host plugin.
|0002||<link rel="stylesheet" type="text/css" media="screen,projection" href="/css/master.css" />|
|0004||<link rel="stylesheet" type="text/css" media="screen,projection" href="/css/combined.css" />|
My master.css contains a list of @import statements, importing all the separated CSS files during development.