The Basics of How to Take Advantage of the Rails Asset Pipeline (for v3.2)

You may have heard of the term "asset pipeline" used in the Rails context and wondered what it was and how to set it up. I've recently read up on the details about it (http://guides.rubyonrails.org/asset_pipeline.html) and had to set up my project to use it, and I'm happy to explain in brief the why and how if you want to just jump right into it.

The most basic point of the asset pipeline is to speed up page load time for your users. Most applications have many javascript libraries and css stylesheets that may take a while to load fully when somebody goes onto your site—especially for the first time.

There are a few things Rails can do for your javascript and css libraries to make them smaller and more likely to get cached:

  1. Put all the code into a single file.
  2. Compress that file; make it the smallest file possible (remove extra spaces, shorten variable names, and even things like turning if/else statements into ternaries just to save room).
  3. Digest that file; this is also known as 'fingerprinting.' This will make a unique sha based on the contents of the file, which will automatically change if the contents are changed in any way. The sha is stuck to the end of the filename. This takes advantage of the fact that some caching is based on file name. So if nothing changes in your code, then there's no need for your user to have to wait for their browser to download the file again.

To take advantage of this, you need to take a few steps. Please note that these are instructions for Rails 3.2, since that is the version my project is currently using. To see the most up-to-date instructions and notes of any updates to the process, please go to the official guide: http://guides.rubyonrails.org/asset_pipeline.html. Tip: for instructions for a specific version, you can add your rails version number into that url, like so http://guides.rubyonrails.org/v3.2.19/asset_pipeline.html

Now let's get on with it!

  1. Place all of your javascript files under app/assets/javascripts and all of your css files under app/assets/stylesheets
  2. Add //=require_tree . to app/assets/javascripts/application.js and *= require_tree . to app/assets/stylesheets/application.css. require_tree will recursively grab your script files and load them in an order you cannot control. If you need to control the order, you can specify the name of your files beforehand with require [filename without the extension]
  3. Add gem 'uglifier' to the assets group in your Gemfile. This will figure out how to make your javascript file much smaller.
  4. In your config/environments/development.rb, I advise you to add config.assets.debug = true. This will stop your asset files from being converted to one huge file when running your application locally, so when you're debugging in the console it'll be easier.

  5. In all of your other environments add the following to your config/environments/[environment_name].rb: 

    config.assets.digest = true
config.assets.compress = true
config.assets.debug = false
config.assets.js_compressor  = :uglifier

  6. run the following in your application's directory, and add it to your deployment script: rake RAILS_ENV=[environment_name] RAILS_GROUP=assets assets:precompile

And that's it, folks. Please note that I left out a lot of details deliberately so you can get up and running with the asset pipeline fast, but I recommend that you read the official rails documentation on it when you have a chance.