Asset Pipeline With Rails 3.1

This is the new very interesting and useful feature in Rails 3.1.

Asset Pipeline

  • The asset pipeline provides a framework to concatenate and minify or compress JavaScript and CSS assets.
  • It allows you to write these assets in other languages like CoffeeScript, Sass and ERB
  • Asset pipeline helpful in production environment cause it will reduce the number of request which browser make.

Prior to Rails 3.1 these features were added through third-party Ruby libraries such as Jammit and Sprockets. Rails 3.1 is integrated with Sprockets through Action Pack which depends on the sprockets gem, by default.

Asset Organization

Prior to Rails 3.1 -:
  • Currently we have all assets in one directory public.we are putting all javascripts either it is third party javascirpt or your own javascript.Its not good way to treat them because like in rails we have a very good organization to put our code file.
  • Its not not easy to update our javascirpt code(like if we are using third party code)

In Rails 3.1-:

There are three directories

  • app/assets-: it holds the code write for specific appication
  • lib/assets -: it holds the generic code we write for our application(for example if we extending any jQuery function)
  • vendor/assets -: it holds the third party code(like we are using any jQuery plugin)

so if you want to access application.css in app/assets/stylesheets.you can just access the url localhost:3000/assets/application.css

you can add additional path to the pipeline in config/application.rb. For example:

1
config.assets.paths << Rails.root.join("app", "assets", "flash")

Manifest files and Directives

  • Manifest files used by Sprockets(a gem support Asset pipe line its is added in rails 3.1 app by default),in these files contains instruction that tell Sprockets which files are required to build a single CSS or Javascript file,these instructions are called Directives
  • In Rails 3.1 Default Directives are application.js in app/assets./javascripts directory and application.css in app/assets/stylesheets

Assets In Development

In Development environment all assets are served as individual files For Example in app/assets/javascripts/application.js

1
2
    //= require core
    //= require blogs</blockquote>

after converting in HTML it will look like

1
2
    <script src="/assets/core.js?body=1" type="text/javascript"></script>
    <script src="/assets/blogs.js?body=1" type="text/javascript"></script>

If turn off debugging by setting config.assets.debug = false in config/environments/development.rb above file will generate

1
2
    <script src="/assets/application.js?body=1" type="text/javascript"></script>
    

In Production

Rails server complied assets using Fingerprinting Scheme

In Fingerprinting scheme a hash of  content is attached to the end of file to uniquely identified the file blogs-908e25f4bf641868d8683022a5b62f54.css

Prior rails 3.1 a time stamp query string is attached to file name stylesheets/blogs.css?1409495796

For example –:

1
2
3
    <%= javascript_include_tag :application%>
    <%= stylesheet_link_tag "application" %>

It will compile in to

1
2
3
    <script src="/assets/application-908e25f4bf641868d8683022a5b62f54.js" type ="text/javascript"></script>
    <link href="/assets/application4dd5b109ee3439da54f5bdfd78a80473.css" media="screen" rel="stylesheet" type="text/css">
  

The fingerprinting behavior is controlled by the setting of config.assets.digest setting in Rails (which is true for production, false for everything else)

Useful Links –: