AssetPackager in rails

AssetPackager is nothing but a 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.

Step 1 – Install and download the plugin

script/plugin install git://

Step 2 – Create asset_packages.yml file

rake asset:packager:create_yml

Now the file will be generated under the /config for 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.

Step 3 – Run the below command to generate the compressed, merged versions for each package

rake asset:packager:build_all

Whenever you rearrange the yaml file, you’ll need to run this task again.


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 %>

Stylesheet Examples

Example call:

  • either by package name:
  <%= stylesheet_link_merged :base %>
  • or by the individual assets:
  <%= stylesheet_link_merged 'screen', 'header' %>

Output in development:

  <link href="/stylesheets/screen.css" media="screen" rel="Stylesheet" type="text/css" />
  <link href="/stylesheets/header.css" media="screen" rel="Stylesheet" type="text/css" />

Output in production:

  <link href="/stylesheets/base_packaged.css?123456789" media="screen" rel="Stylesheet" type="text/css" />