http://cjohansen.no/en/ruby/juicer_a_css_and_javascript_packaging_tool

My script does:

- Prompt for svn revision to deploy
- Prompt for environment
- Write the build date to a settings file that the application uses
- Compress the js and css using Juice, naming the minified css and js files, production${builddate}.css/js
- Sync to s3
- Sync to my app server

In my templates, I call the production css/js like src=”#jsDomain#/production#buildDate#.js”

Its working really nicely, a few keystrokes and my app is deployed for any revision I choose. This post helped a lot. Thanks.

@Marc, sorry I misspelled your name

We are doing something like this:

if(mode = production)
include production css and js (singular compressed files)
else
include dev css and js (lots of uncompressed files)
end if

Even during dev we have this ‘mode’ in production (for the reasons brian points out), but allow that mode to be overwritten with an url argument, e.g. &debug=1. Works pretty well.

I don’t use the individual files locally on a day to day basis – I use the concatenated ones. If I change one of those underlying JS files then I recompile them. If I was doing this day in and day out like you’re suggesting, I would probably have a separate target that just took my local files and rebuilt the concatenated versions into a statically named file for during development. Then you could use your normal deployment scripts to adjust which files to use based upon the environment.

It’s important to work with the compiled scripts most of the time because there are problems that can crop up with minimizing and concatenation. You won’t see them if you’re normally working with separate files.

I don’t know of a good solution beyond what you’re proposing: a more complex bit of Ant search and replace.

[script src="/path/to/my/JSFileIChangeEveryDay_1.js"]
[script src="/path/to/my/JSFileIChangeEveryDay_2.js"]
[script src="/path/to/my/JSFileIChangeEveryDay_3.js"]
[script src="/path/to/my/JSFileIChangeEveryDay_4.js"]
[script src="/path/to/my/JSFileIChangeEveryDay_5.js"]

And on production, you want to have these files all concatenated, so you put that in your build script and it creates a new file: JSFilesIChangeEVeryDay_Combined.js or whatever

Now, your HTML needs to change on production, so that it points to your new combined file instead of each individual js file.

My question is: how are you managing the changing of your HTML during deployments? Or aren’t you?

See, I’m on the verge of instituting a very similar thing as you’ve described, and in my head, I see me simply using ANT to do a find/replace in our main layout file which looks for the big chunk of text that includes all the single JS files and replaces them with a single include for the combined JS file. But if there are other approaches to doing that, I’d love to hear them.

@Marc – I saw you presented on automation at CFUN, wish I could have seen that. I am definitely an Ant novice just getting enough done so I can move on. I’d love to know more.

Since my code plugin is a total fail in the comments, I’m going to post my response as a post…