AssetPackager – JavaScript and CSS Asset Compression for Production Rails Apps

When it comes time to deploy your new web application, instead of sending down a dozen javascript and css files full of formatting and comments, this Rails plugin makes it simple to merge and compress JavaScript and CSS down into one or more files, increasing speed and saving bandwidth.

When in development, it allows you to use your original versions and retain formatting and comments for readability and debugging.

Key Features

• Merges and compresses JavaScript and CSS when running in production.
• Uses uncompressed originals when running in development.
• Generates packages on demand in production

Components

• Rake tasks for managing packages
• Helper functions for including these JavaScript and CSS files in your views.
• YAML configuration file for mapping JavaScript and CSS files to packages.
• Rake Task for auto-generating the YAML file from your existing JavaScript files.

Updates

November ‘08:

• Rails 2.2 compatibility fixes
• No more mucking with internal Rails functions, which means:
  • Return to use of query-string timestamps. Greatly simplifies things.
  • Multiple asset-hosts supported
  • Filenames with ”.”’s in them, such as “jquery-x.x.x” are supported.
• Now compatible with any revision control system since it no longer uses revision numbers.
• Packages generated on demand in production mode. Running create_all rake task no longer necessary.

How to Use

1. Download and install the plugin:

   script/plugin install git://github.com/sbecker/asset_packager.git

2. Run the rake task asset:packager:create_yml to generate the /config/asset_packages.yml file the first time. You will need to reorder files under ‘base’ so dependencies are loaded in correct order. Feel free to rename or create new packages.

Examples of config/asset_packages.yml

Example from a fresh rails app after running the rake task. (Stylesheets is blank because a default rails app has no stylesheets yet):

---
javascripts:
- base:
- prototype
- effects
- dragdrop
- controls
- application
stylesheets:
- base: []

Multiple packages:

---
javascripts:
- base:
- prototype
- effects
- controls
- dragdrop
- application
- secondary:
- foo
- bar
stylesheets:
- base:
- screen
- header
- secondary:
- foo
- bar

3. Run the rake task asset:packager:build_all to generate the compressed, merged versions for each package. Whenever you rearrange the yaml file, you’ll need to run this task again.

Merging and compressing is expensive, so this is something we want to do once, not every time your app starts. Thats why its a rake task. You can run this task via Capistrano when deploying to avoid an initially slow request the first time a page is generated.

Note: The package will be generated on the fly if it doesn’t yet exist, so you don’t need to run the rake task when deploying, its just recommended for speeding up initial requests.

3. Use the helper function whenever including these files in your application. See examples Below.

Javascript Examples:

Example calls

• either by package name:

  <%= javascript_include_merged :base %>

• or by the individual assets:

  <%= javascript_include_merged 'prototype', 'effects', 'controls', 'dragdrop', 'application' %>

Output in development:

<script type="text/javascript" src="/javascripts/prototype.js"></script>
<script type="text/javascript" src="/javascripts/effects.js"></script>
<script type="text/javascript" src="/javascripts/controls.js"></script>
<script type="text/javascript" src="/javascripts/dragdrop.js"></script>
<script type="text/javascript" src="/javascripts/application.js"></script>

Output in production:

<script type="text/javascript" src="/javascripts/base_packaged.js?123456789"></script>

Symbols work too, as does :defaults

<%= javascript_include_merged :defaults %>
<%= javascript_include_merged :foo, :bar %>

http://synthesis.sbecker.net/pages/asset_packager