asset-pipeline-mod3.md

Main features

• Asset concatenation

  • append files together, Merge multiple files into a single file.
  • Easier for a machine to deal with loading a single file, rather than mulitple
  • Reduce the number of requests that a browser makes to render a web page.
  • Sprockets concatenates all JavaScript files into one master .js file and all CSS files into one master .css file.

• Asset minification

  • Minifying files helps make the files more lightweight by removing whitespace.
  • Making it not human readable probably helps with performance.

• Precompilation

  • turn higher-level languages into their base languages (coffeescript -> javascript, sass -> css)
  • it allows assets in your application to be automatically combined with assets from other gems
  • public/assets
    • rake assets pre-compile will move stuff into the public/assets
    • .gitignore your public/assets directory

├── app
│   └── assets
│       ├── images
│       ├── javascripts
│       │   ├── application.js
│       │   └── bootstrap.js
│       └── stylesheets
│           ├── application.css
│           └── bootstrap_and_overrides.css.less
└── public
    └── assets    <-------- All the assets get moved into here when precompiling

• Clobber
  • removes the previous precompiled assets

Assets Locations

• Order does matter: app/assets will override files in lib/assets with the same filename, lib/assets trumps vendor/assets

• Locations

  • app/assets -> assets specific to this application
  • lib/assets -> assets used within internally within your organization, but shared among projects
  • vendor/assets -> assets from an external library

• Load paths

  • At it's core, the asset pipeline is a list of load paths. You can see these load paths by firing up the Rails console and entering:

  Rails.application.config.assets.paths

  • The asset pipeline works its way through your load path. The first asset with a given name wins.

  • You can add additional paths to the asset pipeline in config/initializers/assets.rb:

    Rails.application.config.assets.paths << Rails.root.join("app", "flash", "assets")

Manifests

• Manifests are a way to pull in other, related files.

• manifest files contain directives - instructions that tell Sprockets which files to require in order to build a single CSS or JavaScript file

• Manifest files:

  • application.css
  • application.js

• Manifest Directives

  • require grabs an asset and puts it in our bundle once.
  • include works a lot like require, but it will allow you to include a file more than once. (I have yet to find a practical use for this directive.)
  • require_self tells Sprockets to load the body of the current file before loading any of the dependencies. You would use this if you wrote any styles or JavaScript in application.css or application.js respectively and you wanted Sprockets to load that code before loading any of the required assets.
  • require_directory requires all of the source files of the same format in a given directory. It only goes one level deep.
  • require_tree works like require_directory, but it also traverses subdirectories. Doesn't care about order, however, so sometimes you might need to explicitly require something.
  • depend_on announces that you depend on a file, but does not include it in the asset bundle. stub blacklists a dependency from the bundle.

• Important note about SASS / SCSS

  • Sprockets provides some directives that are placed inside of comments called require, require_tree, and require_self.
  • DO NOT USE THEM IN YOUR SASS/SCSS FILES. They are very primitive and do not work well with Sass files.
  • Instead, use Sass's native @import directive which sass-rails has customized to integrate with the conventions of your Rails projects.

ActionView Helpers

 <%= stylesheet_link_tag "application", :media => "all" %>
 <%= javascript_include_tag "application" %>     # <-- move to the bottom of the layout
                                                 #     so that the DOM is ready 

• image_tag

• ActionView::Helpers::AssetTagHelper Docs

• Rails Guides overview of ActionView Helpers

  audio_path("horse.wav")  # /audios/horse.wav
  audio_tag("sound")       # <audio src="/audios/sound"/>
  font_path("font.ttf")    # /fonts/font.ttf
  image_path("edit.png")   # "/images/edit.png"
  image_tag("dog.png")     # <img src="/images/dog.png" alt="Dog"/>
  video_path("hd.avi")     # /videos/hd.avi
  video_tag("trailer.ogg") # <video src="/videos/trailer.ogg"/>

  IMPORTANT: Look at the Sass-Rails documentation for the SASS version of these helpers that you must use in place of the rails helpers in SCSS files.

Development vs. Production

├── app
│   └── assets
│       ├── images
│       ├── javascripts
│       │   ├── application.js
│       │   └── bootstrap.js
│       └── stylesheets
│           ├── application.css
│           └── bootstrap_and_overrides.css.less
|             
|                                     TEST & DEVELOPMENT (2nd priority)
....................................................................................................
|                               TEST & DEVELOPMENT (1st priority) / PRODUCTION 
└── public
    └── assets    <-------- All the assets get moved into here when precompiling

Running Production Environment

• RAILS_ENV=production rails s
• Need to Setup a key!
• add figaro to your Gemfile
• install figaro
• use rake secret to generate a secret
• put that in your application.yml:

  SECRET_KEY_BASE: [generated secret key]

• Error: for postgres, we will need to delete the username and password from database.yml

production:
  <<: *default
  database: example_project_production
  username: example_project                                         <--- delete
  password: <%= ENV['EXAMPLE_PROJECT_DATABASE_PASSWORD'] %>         <--- delete

• RAILS_ENV=production rails s
• ls log
• To debug a "something went wrong:" tail -f production.log, clear screen, and then refresh the page

rails_12factor gem

• one benefit: give you useful errors in your server log!
• config.serve_static_assets = false <-- rails_12factor gem makes sure this is set to true to work with heroku!

Extras

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

• In regular HTML files, we bring in css files with . How is this done in a Rails project?

• How is a digest/fingerprint used on the assets for caching purposes?

• Done? Take a look at RailsGuides: The Asset Pipeline.