Asset Packager plugin

Plugin details

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.

Because not all browsers will dependably cache JavaScript and CSS files with query string parameters, AssetPackager writes a timestamp or subversion revision stamp (if available) into the merged file names. Therefore files are correctly cached by the browser AND your users always get the latest version when you re-deploy.

Websitehttp://synthesis.sbecker.net/pages/asset_packager Repositoryhttp://sbecker.net/shared/plugins/asset_packager/ Author Scott Becker Tags CSS, Javascript, asset LicenseMIT

Documentation

Install the plugin:
ruby script/plugin install http://sbecker.net/shared/plugins/asset_packager/

Run the rake task 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 file packages.

asset:packager:create_yml



IMPORTANT: JavaScript files can break once compressed if each statement doesn't end with a semi-colon. The minifier puts multiple statements on one line, so if the semi-colon is missing, the statement may no longer makes sense and cause a syntax error.

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: []



Example with multiple merged files:

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



Run the rake task to generate the compressed, merged versions for each package.

asset:packager:build_all


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.

Use the helper functions whenever including these files in your application. See below for examples.

Potential warning: css compressor function currently removes CSS comments. This might blow away some CSS hackery. To disable comment removal, comment out /lib/synthesis/asset_package.rb line 176.

== JavaScript Examples

Example call:

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



In development, this generates:

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



In production, this generates:

  script type="text/javascript" src="/javascripts/base_1150571523.js"/>
  script type="text/javascript" src="/javascripts/secondary_1150729166.js"/>



Now supports symbols and :defaults as well:

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



== Stylesheet Examples

Example call:

<%= stylesheet_link_merged 'screen', 'header' %>



In development, this generates:

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



In production this generates:

  link href="/stylesheets/base_1150729166.css" media="screen" rel="Stylesheet" type="text/css" 

Further Documentation

There is currently no advanced documentation for this plugin.

New documentation

Edit plugin | Back in time (1 older version) | Last edited by: scott, 6 months ago