asset_pipeline_scavengerhung.md

#Asset Pipeline Scavenger Hunt

####What does it mean to concatenate files? Find an image of an example concatenated file.

• Sprockets concatenates all JavaScript files into one master .js file
• and all CSS files into one master .css file.
• reduce the number of requests that a browser makes to render a web page

####Why would we want to concatenate files?

• can mean faster loading for your application
• Web browsers are limited in the number of requests that they can make in parallel, so fewer requests can mean faster loading for your application.

####What does it mean to precompile files?

• coding assets via a higher-level language, with precompilation down to the actual assets

####What does this have to do with coffeescript and sass files?

• sprockets relies on these languages
• Supported languages include Sass for CSS, CoffeeScript for JavaScript, and ERB for both by default

####What does it mean to minify files? Find an image of an example minified file. ####Why would we want to minify files?

• For CSS files, this is done by removing whitespace and comments.
• For JavaScript, more complex processes can be applied.
• You can choose from a set of built in options or specify your own.

####Then open up the code for application.js in your text editor. ####Why are these not the same?

• it is a manifest file that'll be compiled into application.js, which will include a bunch of other files listed in manifest
• any plugin's vendor/assets/javascripts directory can be referenced here using a relative path

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

• require portions, list of assets I want to serve
• 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

####Where can you find two manifests in Catch 'em All?

• in app/javascripts/application.js and app/stylesheets/application.css.scss

####In regular HTML files, we bring in css files with <link rel="stylesheet" href="application.css">. ####How is this done in a Rails project?

• manifest file is stored in app/assets/stylesheets/application.css.scss

####Where do you see this line in Catch 'em All? *in views/layouts/application.html.erb style elements are linked before ending tag with relative path to stylesheet_link_tag 'application'

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

• In production, Rails inserts an MD5 fingerprint into each filename so that the file is cached by the web browser.

• You can invalidate the cache by altering this fingerprint,

• which happens automatically whenever you change the file contents.

• Done? Take a look at RailsGuides: The Asset Pipeline. can reduce the number of requests that a browser makes to render a web page. Web browsers are limited in the number of requests that they can make in parallel, so fewer requests can mean faster loading for your application.

👍