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.
This code is released under the MIT license (like Ruby). You’re free to rip it up, enhance it, etc. And if you make any enhancements, I’d like to know so I can add them back in. Thanks!
This Rails Plugin was inspired by Cal Henderson’s article “Serving JavaScript Fast” on Vitamin: www.thinkvitamin.com/features/webapps/serving-javascript-fast
It also uses the Ruby JavaScript Minifier created by Douglas Crockford. www.crockford.com/javascript/jsmin.html
…and Google’s Closure Compiler, which compresses better than Crockford’s JSMin, but requires an internet connection and your JS code to be sent over the ‘net to Google. closure-compiler.appspot.com/
…and Mihai Bazon’s excellent UglifyJS, running on NodeJS, that compresses on par with Google’s Closure Compiler, but does so in a fraction of the time and does so on your local machine, as long as you have NodeJS installed. github.com/mishoo/UglifyJS
-
Merges and compresses JavaScript and CSS when running in production, either on demand or ahead of time using the provided rake tasks. Configurable to use any of the available compilers, with fallback to the next preferred compiler if needed.
-
Uses uncompressed originals when running in development.
-
Generates packages on demand in production.
-
Standardized, simple API for compilers so that you can add your own.
-
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.
February 2011: (sponsored by lunardawn studios)
-
Standardized compiler API.
-
Added support for UglifyJS using NodeJS.
-
Added configurable compiler fallback.
December 2010:
-
Rails 3.0.3 support.
June 2010:
-
Works fine with Rails 3 beta 3.
-
Sets the built packages’ modification times to the latest mtime of the source files, or order to be more compatible with Rails asset ID caching.
November 2008:
-
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.
-
Download and install the plugin:
rails plugin install git://github.com/brady8/asset_packager.git
-
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 file packages.
rake asset:packager:create_yml
Example from a fresh rails app after running the rake task. (The ‘stylesheets’ listing is blank because a default rails app has no stylesheets yet.):
options:
compilers: - closure - uglify
javascripts:
-
base:
-
prototype
-
effects
-
dragdrop
-
controls
-
application
-
stylesheets:
-
base: []
Multiple packages:
options:
compilers: - closure - uglify
javascripts:
-
base:
-
prototype
-
effects
-
controls
-
dragdrop
-
application
-
-
secondary:
-
foo
-
bar
-
stylesheets:
-
base:
-
screen
-
header
-
-
secondary:
-
foo
-
bar
-
-
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.
rake asset:packager:build_all
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.
Sample Capistrano Recipe for this:
after "deploy:update_code", "asset_packager:build_all" namespace :asset_packager do task :build_all, :roles => :app do run "cd #{release_path} && #{try_sudo} rake asset:packager:build_all" end end
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.
-
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 the noted line in /lib/synthesis/asset_package.rb.
Example call (based on above /config/asset_packages.yml):
<%= javascript_include_merged :base %>
In development, this generates:
<script type="text/javascript" src="/javascripts/prototype.js?1228027240"></script> <script type="text/javascript" src="/javascripts/effects.js?1228027240"></script> <script type="text/javascript" src="/javascripts/controls.js?1228027240"></script> <script type="text/javascript" src="/javascripts/dragdrop.js?1228027240"></script> <script type="text/javascript" src="/javascripts/application.js?1228027240"></script>
In production, this generates:
<script type="text/javascript" src="/javascripts/base_packaged.js?123456789"></script>
Example call:
<%= stylesheet_link_merged :base %>
In development, this generates:
<link href="/stylesheets/screen.css?1228027240" media="screen" rel="stylesheet" type="text/css" /> <link href="/stylesheets/header.css?1228027240" media="screen" rel="stylesheet" type="text/css" />
In production this generates:
<link href="/stylesheets/base_packaged.css?1228027240" media="screen" rel="stylesheet" type="text/css" />
All options for stylesheet_link_tag still work, so if you want to specify a different media type:
<%= stylesheet_link_merged :secondary, 'media' => 'print' %>
rake asset:packager:build_all # Merge and compress assets rake asset:packager:create_yml # Generate asset_packages.yml from existing assets rake asset:packager:delete_all # Delete all asset builds
Copyright © 2006-2008 Scott Becker - synthesis.sbecker.net
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
Contact the current maintainer (Brady Bouchard) via Github for change requests, etc.
Continuing updates sponsored by lunardawn studios - ldawn.com.