I had written some groovy code for doing similar concatenation of javascript files in a project I was working on that was very javascript heavy. I’ve posted the groovy snippet as a github gist, but it’s definitely a bit raw still. I might try and clean it up and integrate it with the YUI compressor and then write a quick post on how I intend to use it.

Cheers,
Damon.

- url: /css/prod/.*
static_files: static/css/prod.css
upload: static/css/prod.css

An example deploy script is below. Actually, the IDs are just fake. If you change the ID part of the URL to a new ID, it will still work! And, yes, it is purely for cache busting purposes.

The dynamic ID is achieved by serving the CSS etc like so in the app.yaml file:

- url: /css/prod/([^-]+)-.*
static_files: static/css/\1.css
upload: static/css/(.*)

Okay, here is the deploy script (there is a separate tests script that will exit if the tests don’t pass).

== AppEngine deploy script ==

#!/bin/sh

export APPLICATION_ID=”my_app_id”

cd $MY_APP_DIR

# The tests all must run successfully.
./tests.sh

echo “** PUBLIC CSS…\n”
cat static/css/base.css \
static/css/file1.css \
static/css/file2.css \
static/css/etc.css > /tmp/precompile.css.tmp;
java -jar /usr/bin/yuicompressor-2.4.2.jar \
–type css /tmp/precompile.css.tmp \
-o static/css/prod.css
echo “\tCSS has been compiled (static/css/prod.css)\n”

echo “** PUBLIC JS…\n”
cat static/js/mootools-1.2.3-core.js \
static/js/base.js \
static/js/file1.js \
static/js/file2.js \
static/js/etc.js > /tmp/precompile.js.tmp
java -jar /usr/bin/yuicompressor-2.4.2.jar \
–type js /tmp/precompile.js.tmp \
-o static/js/prod.js
echo “\tJS has been compiled (static/js/prod.js)\n”

echo “** DEPLOYING…\n”
appcfg.py update $MY_APP_DIR

echo “** DONE!\n”
echo “** CLEANUP…”

rm /tmp/precompile.css.tmp
rm /tmp/precompile.js.tmp
rm $MY_APP_DIR/static/css/prod.css
rm $MY_APP_DIR/static/js/prod.js

Yep was getting around to the CSS + JS compression (I mention it but admittedly it’s right at the end of the post). In reality, I knew I was doing this a bit back to front but I’m the kind of guy that will read the last page in a book so I know where I’m going (well, not really, but that’s about the best analogy I had).

If you get the time would be really interested in hearing more about your deploy script, as I notice it appends a build ID or something to both the CSS and JS resources as part of the deployment, which I’m guessing prevents later pain with cached versions of those files.

Thanks for the response, and hope business continues to grow for you guys over @ Shoes of Prey.

Cheers,
Damon.

Nice post. I have to say I don’t have a lot of experience with CDNs – however, if I can make a really simple suggestion to improve page load speed, it would be to use a JavaScript/CSS compressor to concatenate all of your files into a single master JavaScript or CSS file.

That way you’re only serving 2 HTTP requests – 1 for CSS and 1 for JavaScript – instead of something like the 8 or 9 you’re currently doing.

We use YUI Compressor on Shoes of Prey – and we’ve built it into our deploy script so it all happens magically when we’re launching a new version. On a dev machine we serve out all of the individual files to make it easier to debug.

I also set my default cache expiration in AppEngine to 5 days for static files. This may actually be the default, I can’t remember….

Hope that helps!

Mike