Skip to content

Instantly share code, notes, and snippets.

@JoelLindow

JoelLindow/intro_asset_pipeline.md

Last active July 25, 2017 19:04
Show Gist options
  • Save JoelLindow/0cf99c1fe5f38ead420fb7f2fbafd643 to your computer and use it in GitHub Desktop.
Save JoelLindow/0cf99c1fe5f38ead420fb7f2fbafd643 to your computer and use it in GitHub Desktop.
Download ZIP
Intro to the Asset Pipeline
Raw
intro_asset_pipeline.md

What does it mean to precompile files?

  • It's when all of your code is complied into a transmitable single string that can be moved from server to user.

What does this have to do with Coffeescript and Sass files?

  • Coffeescript is like a higher level version of javascript that almost looks like ruby. Once it's been compiled it looks a lot more like true javascript and is more ready to be "browser readable".

Does it only have to do with Coffeescript and Sass files?

What does it mean to minify files?

  • To reduce the compiled code. Remove all unneccessary characters or white space and make the smallest possible transmitable piece of code without it losing its functionality.

Why would we want to minify files?

  • Because sites will load faster! Download from other machines takes less time.

What does Sprockets do and how does it fit into the precompile / minify puzzle?

  • Sprockets comes built-in as of Rails 3.1 and is considered as an integral part of Rails.
  • The asset pipeline is implemented by the sprockets-rails gem, and is enabled by default.
  • Sprockets does the procompiling for Rails.

Why are these not the same?

What is a manifest (in terms of the asset pipeline)?

  • A file that points to other files.
  • Sprockets uses manifest files to determine which assets to include and serve. These manifest files contain directives - instructions that tell Sprockets which files to require in order to build a single CSS or JavaScript file. With these directives, Sprockets loads the files specified, processes them if necessary, concatenates them into one single file and then compresses them. By serving one file rather than many, the load time of pages can be greatly reduced because the browser makes fewer requests. Compression also reduces file size, enabling the browser to download them faster.
  • It contains directives. It tells sprockets what to use.
  • It requires everything below it in the tree system, all styles and everything else into 1 file. That is the only file the browser needs to read from.

Where can you find two manifests in Catch ‘em All?

  • /javascripts/movement.js
  • /stylesheets/application.css.scss

In regular HTML files, we import CSS files with . How is this done in a Rails project? Where do you see this line in Catch ‘em All?

  • /views/application.html.erb
  • This is the "stylesheet link tag"

How is a digest or fingerprint used on assets for caching purposes?

Research and answer why we’d want to be sure we’re properly using the following tags:

  1. <%= stylesheet_link_tag "application" %>
  2. <%= javascript_include_tag "application" %>
  3. <%= image_tag "rails.png" %>
  • Sprockets does not add any new methods to access your assets - you still use these familiar tags.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment