Asset Pipeline?

Alvaro Muhlethaler


Rails 3.1 introduced a new way to organize and process front-end assets called Asset Pipeline.

This was one of the biggest changes and brought me several issues associated because I didn't know how it really works.

After using it in some projects and reading about it, I learnt about it, and now is so much clearer :)

How does it work?

Basically, the Asset Pipeline (sprockets-rails rails module) has three main goals:

  1. Collect, concatenate and minify assets into one file. (This reduce the number of request that a browser makes to render a web page)

  2. Version assets, using a unique fingerprint in order to avoid cache issues. (So, you could invalidate the cache modifying this fingerprint)

  3. Allows coding assets via a higher-level language, with precompilation down to the actual assets. (Supports SASS for CSS, Coffeescript for javascript and ERB for both by default)

For this, Rails uses sprockets gem(https://github.com/sstephenson/sprockets).

We can use it including it in our Gemfile with Bundler as follows:

gem 'sprockets', '~> 3.0'

Minify?

This is done by removing white spaces and comments for CSS and other more complex process for javascript files.

The compressors by default are "yui" for css, and "uglify" for javascripts.

You can change it using the following config option:

config.assets.css_compressor = :yui 
config.assets.js_compressor = :uglify

Fingerprint?

Sprockets adds a hash at the end of the filename and that's what makes it unique.

An example could be: "application-6bcde4243667adf056c8a9951e8b1c9b.css"

Fingerprinting is enabled for production by default and is disabled for all other environments. It can be enabled or disabled by config.assets.digest option in your configuration.

How do we use it?

Well, asset pipeline is enabled by default in Rails 4.1 (last version of rails while I'm writing this post).

Rails automatically adds "sass-rails", "coffee-rails" and "uglifier" gems to your Gemfile. These are the gems used by rails-sprockets to serve your assets.

Every file you need has to be precompiled and in the public folder, so how do we do that?

The asset pipeline uses manifest files to know which files includes and the order between them.

When we create a Ruby on Rails application we already have two manifest files. One for javascripts "application.js" and other for stylesheets "applications.css.scss".

That information is given by directives in the manifest file. Directives must begin with "//=" or “@import” for scss files. 

For instance:  

Javascripts: "app/assets/javascripts/application.js"

//= require jquery
//= require jquery_ujs
//= require modernizr-2.5.3
//= require functions

 

CSS: "app/assets/stylesheets/application.css.scss"

@import “styles”;
@import “main”;
@import “font-awesome”; 

(If you need more info about how to write manifest files and what are they for, you can read this post: http://www.foraker.com/rails-asset-pipeline-handling-of-css-and-js/)

Now, when we execute RAILS_ENV=production rake assets:precompile task, it's going to create two files in public/assets:

public/assets/application-422523190372292ce9163949f6674cca.js and

public/assets/application-07076cc4c1702a6cd96b8c563ab17529.css.

 

Each one of them is going to contain all the code of all your javascripts and stylesheets files respectively.

Just as a comment, there's another two interesting tasks: rake assets:clean and rake assets:clobber.

The first one execute a cleaning of the assets files, keeping the last 3 precompiled assets, and the second one removes all temporal assets files.



How to contact us

Our Location

DireccionArismendi 1420 Of. 102 Telefono(+598) 2409 15 66 Mailinfo@vairix.com

Follow us


Want to contact us?