12.1. Introduction

The asset pipeline is integrated and used by default as of Rails 3.1. It offers the Rails developer the opportunity of delivering CSS, JavaScript and image files to the browser more optimally - in other words, in a more compressed form and therefore more quickly. Different CSS files are combined into one big file and delivered to the browser with a fingerprint in the file name. This fingerprinting enables the browser and any proxy in between to optimally cache the data, so the browser can load these files more quickly.
Within the asset pipeline, you can program CSS, SASS, JavaScript and CoffeeScript extensively and clearly, in order to let them be delivered later as automatically compressed CSS and JavaScript files.
As an example we use once more our web shop with a product scaffold:
$ rails new webshop
$ cd webshop 
$ rails generate scaffold product name 'price:decimal{7,2}'
$ rake db:migrate
In the directory app/assets you will then find the following files:
|-- images
|   `-- rails.png
|-- javascripts
|   |-- application.js
|   `-- products.js.coffee
`-- stylesheets
    |-- application.css
    |-- products.css.scss
    `-- scaffolds.css.scss
The files app/assets/javascripts/application.js and app/assets/stylesheets/application.css are what is referred to as manifest files. They automatically include the other files in the relevant directory.

Manifest Files

In app/assets/javascripts and app/assets/stylesheets there are always manifest files that contain instructions to the asset pipeline. They define everything that is to be integrated.


The file app/assets/javascripts/application.js has the following content:
// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
// or vendor/assets/javascripts of plugins, if any, can be referenced here using a relative path.
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// the compiled file.
//= require jquery
//= require jquery_ujs
//= require_tree .
In the application.js, the jQuery files defined in the jquery-rails gem are automatically integrated (for further information on jQuery, please visit http://jquery.com/). Plus all other files in this directory are integrated via require_tree . as shown above.
The not yet optimized result can be viewed in the development environment at the URL


The file app/assets/stylesheets/application.css has the following content:
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
 * or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path.
 * You're free to add application-wide styles to this file and they'll appear at the top of the
 * compiled file, but it's generally better to create a new file per style scope.
 *= require_self
 *= require_tree .
With the command require_tree . all files in this directory are automatically integrated.

rake assets:precompile

When using the asset pipeline, you need to remember that you have to precompile the assets before starting the Rails server in the production environment. This happens via the command rake assets:precompile:
$ rake assets:precompile
/Users/xyz/.rvm/rubies/ruby-1.9.3-p194/bin/ruby /Users/xyz/.rvm/gems/ruby-1.9.3-p194@global/bin/rake assets:precompile:all RAILS_ENV=production RAILS_GROUPS=assets


If you forget to do this, you will find the following error message in the log:
ActionView::Template::Error (application.css isn't precompiled)
The files created by rake assets:precompile appear in the directory public/assets
|-- application-0149f820dbdd285aa65e241569d8c256.css
|-- application-0149f820dbdd285aa65e241569d8c256.css.gz
|-- application-f8ca698e63b86d217c88772a65d2d20e.js
|-- application-f8ca698e63b86d217c88772a65d2d20e.js.gz
|-- application.css
|-- application.css.gz
|-- application.js
|-- application.js.gz
|-- manifest.yml
|-- rails-be8732dac73d845ac5b142c8fb5f9fb0.png
`-- rails.png
Go ahead and use your favorite editor to have a look at the created css and js files. You will find optimized code. If the web server supports it, the zipped gz files are delivered directly, which speeds things up a bit more.


The difference in file size is enormous. The file application.js created in the development environment has a file size of 100 KB. The file js.gz created by rake assets:precompile is only 36 KB. Users of cellphones in particular will be grateful for smaller file sizes.
The speed advantage incidentally lies not just in the file size, but also in the fact that only one file is downloaded, not several. The HTTP overhead for loading a file is time-consuming.

The Fingerprint

The fingerprint in the file name consists of a hash sum generated from the content of the relevant file. This fingerprint ensures optimal caching and prevents an old cache being used if any changes are made to the content. A simple but very effective method.

Updates about this book will be published on my Twitter feed.