Concatenate your stylesheets and JavaScripts in 3 seconds – Rails 2.0 a feature a day #3

In: Ruby on Rails|Web development

12 Dec 2007

I don’t think I need to explain how concatenating your 5 stylesheets and 12 JavaScript files into single files each makes your webpages load faster. Unless you’re using multiple asset hosts (Rails 2 allows for multiple asset hosts), then it becomes tricky to say for sure which method is better, but I digress.

There’re a bunch of really useful plugins that help you bundle your JS and CSS files, most of them offering minifying/packing of JS and stripping of comments and whitespace in CSS as well. I was a big fan (still love it) of Asset Packager, but newer plugins like PackR and Bundle-fu work great too.

With Rails 2.0 though, unless you want the minifying/packing/comment-stripping features, you can do away with installing a packager plugin. Remember your trusty javascript_include_tag and stylesheet_link_tag? They now accept a :cache option:

# :cache => true creates a cached javascript named all.js.
<%= javascript_include_tag :all, :cache => true %>
# This becomes:
# <script type="text/javascript" src="/javascripts/all.js"></script>

# You can name your javascript too, by passing a name instead of true.
<%= javascript_include_tag 'jquery', 'swfobject', 'application', :cache => 'base' %>
# This becomes:
# <script type="text/javascript" src="/javascripts/base.js"></script>

# Same deal for stylesheets...
# :cache => true creates a stylesheet named all.css.
<%= stylesheet_link_tag :all, :cache => true %>
# This becomes:
# <link href="/stylesheets/all.css"  media="screen" rel="Stylesheet" type="text/css" />

# You can name your stylesheet like for javascript_include_tag.
<%= stylesheet_link_tag 'yui/reset-fonts-grids', 'application', :cache => 'styles' %>
# This becomes:
# <link href="/stylesheets/styles.css"  media="screen" rel="Stylesheet" type="text/css" />

Of course, this only takes place if caching is turned on (ActionController::Base.perform_caching), which is on by default in the production environment and off in the development environment.

For those who want to look at some code, check out the changeset.

About the contributor, DHH

Well, DHH hardly needs any mention. David has_one Wikipedia entry. Nice little touch on this new feature though, I love the convenience.

I promise, like I’d said before, to cover contributions by someone less “mainstream” in the next Rails 2 “feature a day” blog post.

5 Responses to Concatenate your stylesheets and JavaScripts in 3 seconds – Rails 2.0 a feature a day #3

Avatar

Ruby, Rails, CSS, Tools, HTML « exceptionz

December 14th, 2007 at 3am

[...] Rails 2.0 – Concatenate your stylesheets and javascript [...]

Avatar

Brandon Zylstra

December 15th, 2007 at 2am

Sorry to nitpick, but you’re missing a % on the second line.

Thanks for the awesome Rails 2.0 morsels. I’m hooked on it.

BTW, I’m able to enlarge the comments textarea in Safari 3 (on a Mac) just fine, although Safari has this feature built-in, so it’s not necessary. By “Mozilla” do you mean all Gecko browsers, or just specifically the browser by that name (now dubbed ocean orangutan or whatever they call it). It would seem odd if Firefox couldn’t do it but Mozilla could. If you don’t have access to a Mac, I could test on Camino, Firefox for Mac, and Opera for Mac.

Avatar

Chu Yeow

December 16th, 2007 at 6pm

Thanks for pointing that out Brandon. Fixed :)

And yup by “Mozilla” I mean all Gecko browsers. Actually, that whole “enlarge the comments textarea” thing is a throwback from the past (3-4 years ago). I don’t think it’s really that useful nowadays so I may just remove it. (Oh and I have a Mac, but thanks anyway.)

Avatar

Tecker.LOG » Blog Archive » ????????stylesheets?JavaScripts?????Rails 2.0?? #3(??)

June 3rd, 2008 at 11pm

[...] ??: Concatenate your stylesheets and JavaScripts in 3 seconds – Rails 2.0 a feature a day #3 [...]

Avatar

bundle_fu for JS/CSS concatenation/minimisation « Vlad Zloteanu’s Technical Blog

January 31st, 2009 at 5am

[...] Rails 2.0 has a new feature for accomplishing this, as shown here. [...]