Skip to content

Instantly share code, notes, and snippets.

@kamiboers
Created April 20, 2016 15:46
Show Gist options
  • Save kamiboers/e752db58a1d5452e64850def7bbee7d8 to your computer and use it in GitHub Desktop.
Save kamiboers/e752db58a1d5452e64850def7bbee7d8 to your computer and use it in GitHub Desktop.
  1. What does it mean to concatenate files? Find an image of an example concatenated file. Why would we want to concatenate files? Joining or merging files. We might want to concatenate files to reduce the size of the files and speed up our app's use of assets. Concatenated Files

  2. What does it mean to precompile files? What does this have to do with coffeescript and sass files? Pricompiled files are compiled into an intermediate form that is faster to process for the compiler.
    Coffeescript is an abbreviated language that compiles into JavaScript. Sass is faster to write than CSS, and it is reusable and read more efficiently by the computer.

  3. What does it mean to minify files? Find an image of an example minified file. Why would we want to minify files? Minification of files remoes all unnecessary characters (whitespace, trailing spaces, sometimes block delimiters) from source code without changing its functionality. Minified File We minify files because whitespace that makes code more readable for humans is not necessary for computers, and slows them down.

  4. Start up the server for Catch 'em All (rails s) and navigate to http://localhost:3000/assets/application.js. Then open up the code for application.js in your text editor. Why are these not the same? The view in the browser is expanded and formatted for human view.

  5. What is a manifest (in terms of the asset pipeline)? Where can you find two manifests in Catch 'em All? Sprockets uses manifest files to determine which assets to include and serve. These manifest files contain directives - instructions that tell Sprockets which files to concatenate and compress.

  • application.js and application.css.scss are in the app/assets folder in Catch 'em All.
  1. In regular HTML files, we bring in css files with . How is this done in a Rails project? Where do you see this line in Catch 'em All? Not sure.

  2. How is a digest/fingerprint used on the assets for caching purposes? Sprockets concatenates all JavaScript files into one master .js file and all CSS files into one master .css file. 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.

@Carmer
Copy link

Carmer commented Apr 20, 2016

  1. what we see is the concatenated file of every js asset.
  2. That is where the manifest lives, but the manifest itself is the list of files required. the statement /=require tree . requires all the assets and thus all the assets are included in the manifest. We could require specific files instead.
  3. <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %> <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment