287 The asset pipeline [1d]

Updated . Posted . Visible to the public. Deprecated.

This card was replaced by Frontend build pipelines in Rails

The asset pipeline is one of Rails' two mechanisms how stylesheets, javascripts and images from your /assets folder are processed and delivered to the browser. Rails has a second pipeline called webpacker, which we will cover later.

Learn

  • Read Everything You Should Know About the Rails Asset Pipeline
  • Read How to make your application assets cachable in Rails
  • Read Managing vendor libraries with the Rails asset pipeline
  • Understand
    • What is "sprockets" and how does it relate to the asset pipeline?
    • What is a "manifest"? What does require, require_tree, require_self do?
    • What is "asset minification" and why is it necessary?
    • What is "asset concatenation" and why is it necessary?
    • What is "asset fingerprinting" and why is it necessary?
    • What is "precompiling"? How and when does it happen?
    • Why are the image-url and font-url necessary for sass urls?
    • What are "expiry" or "cache-control" headers? How do those work for our applications?
    • When importing variables or mixins into a .sass file, we need to use @import other_file.
      We cannot use //= require 'other_file'.
      Do you understand why?

Other resources

Exercise: Precompile your assets

  • In your MovieDB, add the following line to your config/environments/development.rb:

    config.assets.compile = false
    config.assets.debug = false
    

    Then restart your server. This mimicks how applications work in production.

  • Now reload your page. It will probably show an exception or have broken stylesheets or Javascript. Try to get everything working again. You will need rake assets:precompile.

  • If you have trouble understanding why stuff does not work, read our card Rails asset pipeline: Why things break in production and what precompilation does to your assets

  • When you're done, remove the lines from your development.rb again and run rake assets:clobber. Keep other changes.

Exercise: Reorganize your JavaScript

In your MovieDB, take a look at your Javascript files. Are they organized like your ruby code, where every functional component lives in its own file in an appropriate directory?

If not, reorganize them using the asset pipeline.

Henning Koch
Last edit
Katrin
License
Source code in this card is licensed under the MIT License.
Posted by Henning Koch to makandra Curriculum (2015-10-01 10:37)