What the Asset Pipeline Is & Does
The asset pipeline also allows you to write your CS and JS assets in preprocessors such as Sass or CoffeeScript. When you generate a new Rails app, the
uglifier gems are automatically added to your Gemfile. Sprockets, a gem that enables the asset pipeline, will use these gems as part of the asset compression process.
The asset pipeline is implemented by the
sprockets-rails gem. Assets you use in your application should be placed in either the
vendor/assets directories. The difference among the three is that
app/assets should be reserved for assets owned by the application,
lib/assets should contain your own libraries’ code, and
vendor/assets is for third-party libraries.
The Sprockets gem will search the three default asset locations for a referenced file. Within the
app/assets file is where you should define your manifest file. The manifest file should list which other files Sprockets should use to build the master asset file.
Sprockets will read the directives, or instructions, in the manifest file to figure out which assets to require. There are multiple directives that Sprockets can parse, including
require_self, and link. One imporant thing to note is that if you try to require a package with both JS and CSS files, the files for each language will need to be broken out into separate directories so that Sprockets can correctly concatenate them. That should probably have been obvious, but eh, live and learn, right?
require_directory, the argument must be a relative path. So if your directory structure looks like this:
app --assets --stylesheets --books --application.css
the directive from
application.css would look like this:
*= require ./books
require_tree is different in that it will also recursively require all the
files in subdirectories of the directory specified.
require will only require the file name specified by the path. If that
file happens to be an index file (index.css), everything explicitly listed in the
manifest file will also be required.
For example, if your directory structure looks like this:
app --assets --stylesheets --books --books.css --index.css --style.css --application.css
you could do the following:
/*application.css*/ /* *= require books */
Sprockets treats index files as “proxies for folders”, so when you specify
books, Sprockets will find the
index.css and read that file.
Then, from you could:
/* index.css */ /* *= require ./books.css */
This would tell Sprockets to require the books css file as well. Thus, within directories, you could have separate manifest files in order to be very explicit about which files to include in the asset pipeline.
For more information about directives, see the Sprockets gem documentation. Typically, I end up using
If you’re using sass, you should use the
@import rule instead of sprockets directives because of scope. Without the
@import, you won’t be able to use mixins and variables.
In addition, if you’re using CSS and SAss with the asset pipeline, you’ll
need to use the
helpers in oder to correctly reference the images, fonts, and videos from
The search path for the asset pipeline will follow the order of app, lib, then vendor. If a file with the same name is found first, only that file will be included in the master file.
Linking to the Stylesheet
Then, to load up the master stylesheet and JS file, you’d use the stylesheet and JS link tags: