Rails upgrade from 3.0.7 to 3.1 and asset pipe-lining

Following my previous blog, I happen to work on another rails upgrade at the beginning of my new project. This time rails 3.0.7 to 3.1. I though, I should document these steps, as it might help myself or someone else in future.

I googled and found a good discussion on stack-overflow. As Forrest Ye gave the right answer, I began the migration step by step, as it is written:
"Edit Gemfile, change Rails gem version

gem 'rails', '3.1.0'

Also adds new gems introduced in 3.1.0

group :assets do
  gem 'sass-rails', "~> 3.1.0"
  gem 'coffee-rails', "~> 3.1.0"
  gem 'uglifier'
end
gem 'jquery-rails'

run

bundle update rails

Then run rake rails:update and resolve conflicts."

I found few conflicts and before accepting them, I tried to understand:

1. config/application.rb:
I paid attention to:

config.assets.enabled = true
config.assets.version = '1.0'

which means you are enabling assets pipe-lining  which is one of the feature of rails 3.1, I accepted the changes.
2. config/environments/development.rb:

config.action_view.debug_rjs = true

which has been deprecated, so this line should be deleted, if you are using rjs in views, debugging is not supported now.

config.assets.compress = false

which means assets compression is off in development, I accepted the changes.

config.assets.debug = true

it means, you can see the assets being loaded in logs. I accepted this change.

3. config/environments/production.rb

I saw again configuration related to asset pipeline:

config.assets.compress = true
config.assets.compile = false
config.assets.digest = true

Simply, accept these changes.

Once this is done, move all assets from public/images, public/javascripts, public/stylesheets to app/assets/ directory. Again, you have to make sure, that you
Include css/javascript links in your layout file like this

<%= stylesheet_link_tag "application" %>
<%= javascript_include_tag "application" %>

Again, it is important to understand the behavior of asset pipeline and how it works. For example, in application.js file, you will have:

//= require_tree .

that means, all the files from assets/javascripts directory will be loaded automatically, as application is being loaded, in hierarchical format. If you do need js files in sequence, mention that above this line, e.g.:

//= require jquery 

//= require jquery_ujs

//= require highcharts

//= require_tree .

Similarly you have application.css file, which will load assets in hierarchy, so override it if needed. 

One important thing I noticed is about images, which are embedded in stylesheets. I had stylesheet.css as:

/*
*= require_self
*= require_tree .
*/
#header { height:20px; }
body {background-image:url(../images/mainBack.png) !important; background-repeat:repeat-x;}

 So, after moving images to app/assets/images directory, I have to remove the relative path of the image:

body {background-image:url(mainBack.png) !important; background-repeat:repeat-x;}

Similarly for all other styles and that is it!