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.
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 . */
So, We will try to figure out the term require require_self and require_tree .
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 ,
//= 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.