Ruby on Rails plugin - CSS/JS asset bundling in 10 seconds or less!
Ruby JavaScript
Pull request Compare This branch is 15 commits ahead of timcharper:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.


Bundle fu

Each css / js you load causes your site to load slower ! You can speed things
up exponentially by simply combining all your css/js files into one file each.

Bundle_fu makes it easy to do. It’s as easy as 1, 2 !


Step 1

Install this plugin

script/plugin install git://

Step 2

Put the following around your stylesheets/javascripts (note it works with any
method of including assets!):

  <% bundle do %>
    <%= javascript_include_tag "prototype" %>
    <%= stylesheet_link_tag "basic.css" %>
    <%= calendar_date_select_includes params[:style] %>
    <script src="javascripts/application.js" type="text/javascript"></script>
  <% end %>

That’s it!


The <% bundle %> method accepts several options :

  1. :js_path defaults to "/javascripts/cache"
  2. :css_path defaults to "/stylesheets/cache"
  3. :name the bundle name set it if you have multiple bundle blocks
  4. :bypass if You want to skip the asset bundling, if its a Proc
    or symbol it will call/send it and use it’s outcome
  5. :packr_options if Packr is
    available (defined) it will use it for packing javascript files and pass the
    given options to it.

More Info

This Fork

This fork was created mainly to add support for asset id (timestamping) in CSS
url links. Bundle-fu by default rewrites (relative) CSS urls, it’s very useful
if these rewrites use the rails provided asset tag helpers, thus enjoying asset
cache busting with far future headers. This is exactly what this version does !

CSS Source

  #header {
    background-image: url(../images/header-bg.png) no-repeat scroll;

  #footer .button {
    background-image: url("./images/button-bg.gif");

Bundled CSS

  #header {
    background-image: url(/images/header-bg.png?1275245642) no-repeat scroll;

  #footer .button {
    background-image: url(/stylesheets/images/button-bg.gif?1275842817);