breaking into the unknown…

require_tree require_self in asset_pipeline

Leave a comment

Assets Pipeline introduced with rails 3, combines all the js file into one application.js file and all css files into one application.css file.

=> Understanding application.js and application.css in rails

application.js and application.css are manifest file in rails . A manifest file is a file which simply enumerates the files which are included in the distribution, either for processing by various packaging tools, or for human consumption.

When you create a new rails 3 application, you will find app/assets folder containing javascript, stylesheet and images folder within it.

within stylesheet folder you will find application.css file with below 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 .

Similarly, you can find application.js file in javascript folder with the below 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 .

So, We will try to figure out the term require require_self and require_tree .

require is like usual ruby require which make a file accessible within the file it is called. The file path will be relative and will be searched in path : lib/assets/javascripts, vendor/assets/javascripts, or vendor/assets/javascripts for javascript and lib/assets/stylesheet, vendor/assets/stylesheet, or vendor/assets/stylesheet for stylesheet . Further you do not need to provide extension of the file as it assume stylesheet will contain .css files and javascript will contain .js file. Anyway, it will not complain if you provide the extension also .

require_self tell the asset pipeline to include the file within which it is used i,e here it is telling the asset pipeline to include application.css file also while precompiling the css assets . It means if you write any css within application.css (avoid it , it is against convention) that will also get reflected.basically, since we are not writing any css within application.css, removing require_self will not make any difference.

require_tree will tell asset pipeline to include all the files within the specified directory. By default it is set to current directory with . (i,e dot) . So say you have bootstrap.min.css and bootstrap_responsive.min.css file in app/assets/stylesheet folder, then the require_tree . will automatically load them. Now say you have put your all custom css file in app/assets/custom_css folder, then you can load them by writing another require_tree as below

 *= require_self
 *= require_tree .
 *= require_tree ../custom_css

So first require_tree will load all css from current directory i,e stylesheet folder and second one will from custom_css folder.

NOTE : require_tree load all the file from the specified directory, but in random order, mostly in alphabetically order. Be careful ,  as css and js files are dependent on the order in which they are called

=> Loading css or js file in specific order
Js files are dependent on the order in which they are called. For example let you have jquery.min.js , bootstrap.min.js ,

bootstrap_responsive.min.js and custom.js file in app/assets/javascript folder. But say in application.js you write

//= require_tree .

It will load all the above files for you, but not in desired order. So for the file which need in order use require, as then they will be called in the order they are called. So below is the correct way of specifying the file.

 //= require jquery.min.js 
 //= require bootstrap.min.js
 //= require bootstrap-responsive.js
 //= require_tree .

So, the file with require will be called in same order, and then all other file will be called. Also you may call require_tree at any position. See another example below of application.css from one of my application

 *= require jquery.loader-min
 *= require ui.jqgrid
 *= require_tree .
 *= require jquery-ui/dark-hive
 *= require themes/cyborg/css/bootstrap.min.css
 *= require themes/cyborg/css/bootstrap_and_overrides.css
 *= require_self

I have called, some files after require_tree , as those are files in vendor directory and I want them to be called, after all css file in current directory is loaded.

NOTE : require_tree do not include files which are already called by require . Further If you want you can call all the files with require and then you will not need require_tree.




Author: arunyadav4u

over 7 years experience in web development with Ruby on Rails.Involved in all stage of development lifecycle : requirement gathering, planing, coding, deployment & Knowledge transfer. I can adept to any situation, mixup very easily with people & can be a great friend.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s