Rails Asset Pipeline

gistfile1.txt

Rails Asset Pipeline
the basics of how to use the asset pipeline
best practices for structuring where to put your assets
how to use the precompile array to specify what files are processed by the asset pipeline
how Sass and Coffeescript can be leveraged
how to use Rails asset helper methods, and
some gotchas


Short history
  - when was it introduced

What does it do?

3 things to your JS & CSS
  # Concatenate
    advantages = %i[bandwidth reduction whitespace single_file reduces latency]

  # Minify
    - remove whitespace, and comments
    - shortens variable names

  # Preprocessing
    -var replace



Gem the handles asset Pipeline
# Powered by Sprockets Rails
# https://github.com/rails/sprockets-rails




# Ways to skip Asset Pipeline

ways_skip_pipeline = {
  'via_config' => 'config.assets.enabled = false',
  'via_not_including_it_in_the_application_creation' => 'rails new appname --skip-sprockets'
}





basic pathing

# app/assets/images/logo.png
= image_tag('logo')

# Outputs something like <img src="/assets/logo-[hash].png" />

# public/images/logo.png
= image_tag('/images/logo.png')

# Outputs something like
# <img src="/images/logo.png" />




Usage



# Asset Organization
assets_path = %i[app/assets lib/assets vendor/assets]
# app/assets is for assets that are owned by the application, such as custom images, JavaScript files or stylesheets.

# lib/assets is for your own libraries' code that doesn't really fit into the scope of the application or those libraries which are shared across applications.

# vendor/assets is for assets that are owned by outside entities, such as code for JavaScript plugins and CSS frameworks. Keep in mind that third party code with references to other files also processed by the asset Pipeline (images, stylesheets, etc.), will need to be rewritten to use helpers like asset_path.


# Usage
# Demo Asset Path
# CSS ERB File for path helpers


# Demo: Data URI
#logo { background: url(<%= asset_data_uri 'logo.png' %>) }


Commands

Rails.application.config.assets.paths


Directives
//=


ap Rails.application.config.assets.precompile


Example on adding a Gemfile
bundle add letter_opener_web

letter_opener is an interface for browsing sent emails.


bundle exec rails c
ap Rails.application.config.assets.precompile



lookup_path

hierarchy

app/assets/config
app/assets/images
app/assets/javascripts
app/assets/stylesheets

vendor/assets/javascripts
vendor/assets/stylesheets

.rvm/gems/ruby-2.4.1/gems/jquery-rails-4.3.1/vendor/assets/javascripts/jquery.js



// minified code
// require blah
// require blahblah
// require blahblahblah
// require_tree .


Demo: require_tree hierarchy (alpha)






require_tree vs require_directory







Fingerprinting

rails assets:precompile
config.assets.prefix

Hash? Cache buster



Dev vs Prod
config.assets.resolve_with

# Dev where debug is true, or digests are disabled (dev default)
%i[ environment ]

# Dev where debug is false, or production with compile enabled.
%i[ manifest environment ]

# Production default.
%i[ manifest ]

Demo:
config.assets.resolve_with = %i[manifest]



Resources
https://learn.co/lessons/images-and-the-asset-pipeline
https://medium.com/@adamzerner/rails-asset-pipeline-982f3ea75596