Demystifying The Rails Asset Pipeline

An internal talk at FutureLearn to help us all learn a little more about the asset pipeline.

[Disclaimer] Slides won't help much on their own without words and demos.

Transcript

1. Mark J Smith - @mark_js FutureLearn - @FutureLearn Demystifying
 The
 Rails
 Asset
 Pipeline
2. –Robin Ward, co-founder of Discourse “My feeling was for a long time that the asset pipeline was the worst possible way to manage assets… except for every other way.” https://meta.discourse.org/t/future-thoughts-discourses-javascript-ember-app/16715
4. Assets
5. !"" app $ !"" assets $ $ !"" images $ $ $ &"" main_logo.svg $ $ !"" javascripts $ $ $ !"" admin.js $ $ $ !"" application.js $ $ $ !"" behaviors $ $ $ $ !"" ajax_form_submit.js.coffee $ $ $ $ &"" autocomplete.js.coffee $ $ $ &"" components $ $ $ &"" select_boxes.js.coffee $ $ &"" stylesheets $ $ !"" application.css $ $ !"" components $ $ $ !"" avatars.css.scss $ $ $ !"" modals.css.scss $ $ $ &"" panels.css.scss $ $ !"" typography.css.scss $ $ !"" utils $ $ $ &"" icons.css.scss $ $ &"" vairables.css.scss | ... ... ... &"" vendor &"" assets !"" javascripts $ !"" jquery.form_validation.js $ &"" slider_plugin.js &"" stylesheets !"" icomoon.css &"" slider_plugin.css
6. <%= javascript_link_tag ‘application’ %> <%= stylesheet_link_tag ‘application’ %> = javascript_link_tag ‘application’ = stylesheet_link_tag ‘application’
7. !"" app $ !"" assets $ $ !"" images $ $ $ &"" main_logo.svg $ $ !"" javascripts $ $ $ !"" admin.js $ $ $ !"" application.js $ $ $ !"" behaviors $ $ $ $ !"" ajax_form_submit.js.coffee $ $ $ $ &"" autocomplete.js.coffee $ $ $ &"" components $ $ $ &"" select_boxes.js.coffee $ $ &"" stylesheets $ $ !"" application.css $ $ !"" components $ $ $ !"" avatars.css.scss $ $ $ !"" modals.css.scss $ $ $ &"" panels.css.scss $ $ !"" typography.css.scss $ $ !"" utils $ $ $ &"" icons.css.scss $ $ &"" vairables.css.scss ... ... &"" vendor &"" assets !"" javascripts $ !"" jquery.form_validation.js $ &"" slider_plugin.js &"" stylesheets !"" icomoon.css &"" slider_plugin.css
8. Easy.
9. Rails - http://github.com/rails/rails Sprockets - http://github.com/sstephenson/sprockets Sprockets-Rails - http://github.com/rails/sprockets-rails
11. <%= javascript_link_tag ‘application’ %> <%= stylesheet_link_tag ‘application’ %> - javascript_link_tag ‘application’ - stylesheet_link_tag ‘application’
12. Rails actionview/lib/action_view/helpers/asset_tag_helper.rb ! Sprockets-Rails lib/sprockets/rails/helper.rb
13. Rails actionview/lib/action_view/helpers/asset_tag_helper.rb ! Sprockets-Rails lib/sprockets/rails/helper.rb
14. *Demo*
15. // This is a manifest file that'll be compiled into application.js, which will include all the files // listed below. // // Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts, // or vendor/assets/javascripts of plugins, if any, can be referenced here using a relative path. // // It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the // compiled file. // // Read Sprockets README (https://github.com/sstephenson/sprockets#sprockets-directives) for details // about supported directives. // //= require jquery //= require jquery_ujs //= require turbolinks //= require_tree .
16. Sprockets lib/sprockets/directive_processor.rb
17. <%= javascript_link_tag ‘application’ %> ! Sprockets-Rails lib/sprockets/rails/helper.rb
19. Sprockets lib/sprockets/server.rb ! Sprockets-Rails lib/sprockets/railtie.rb
20. Sprockets lib/sprockets/resolve
21. !"" app $ !"" assets $ $ !"" images $ $ $ &"" main_logo.svg $ $ !"" javascripts $ $ $ !"" admin.js $ $ $ !"" application.js $ $ $ !"" behaviors $ $ $ $ !"" ajax_form_submit.js.coffee $ $ $ $ &"" autocomplete.js.coffee $ $ $ &"" components $ $ $ &"" select_boxes.js.coffee $ $ &"" stylesheets $ $ !"" application.css $ $ !"" components $ $ $ !"" avatars.css.scss $ $ $ !"" modals.css.scss $ $ $ &"" panels.css.scss $ $ !"" typography.css.scss $ $ !"" utils $ $ $ &"" icons.css.scss $ $ &"" vairables.css.scss ... ... &"" vendor &"" assets !"" javascripts $ !"" jquery.form_validation.js $ &"" slider_plugin.js &"" stylesheets !"" icomoon.css &"" slider_plugin.css
22. Processors
23. ! register_preprocessor 'text/css', DirectiveProcessor register_preprocessor 'application/javascript', DirectiveProcessor ! register_bundle_processor 'application/javascript', Bundle register_bundle_processor 'text/css', Bundle ! register_compressor 'text/css', :sass, LazyProcessor.new { SassCompressor } register_compressor 'text/css', :scss, LazyProcessor.new { SassCompressor } register_compressor 'text/css', :yui, LazyProcessor.new { YUICompressor } register_compressor 'application/javascript', :closure, LazyProcessor.new { ClosureCompressor } register_compressor 'application/javascript', :uglifier, LazyProcessor.new { UglifierCompressor } register_compressor 'application/javascript', :uglify, LazyProcessor.new { UglifierCompressor } register_compressor 'application/javascript', :yui, LazyProcessor.new { YUICompressor } ! # Mmm, CoffeeScript register_engine '.coffee', LazyProcessor.new { CoffeeScriptTemplate }, mime_type: 'application/javascript' ! # JST engines register_engine '.jst', LazyProcessor.new { JstProcessor }, mime_type: 'application/javascript' register_engine '.eco', LazyProcessor.new { EcoTemplate }, mime_type: 'application/javascript' register_engine '.ejs', LazyProcessor.new { EjsTemplate }, mime_type: 'application/javascript' ! # CSS engines register_engine '.sass', LazyProcessor.new { SassTemplate }, mime_type: 'text/css' register_engine '.scss', LazyProcessor.new { ScssTemplate }, mime_type: 'text/css' ! # Other register_engine '.erb', LazyProcessor.new { ERBTemplate }, mime_type: 'text/plain' !
24. *Demo*
25. In Production
26. No mounted server = no Sprockets
27. rake assets:precompile
28. rake assets:precompile Sprockets-Rails lib/sprockets/rails/task.rb
29. application.js, application.css, **/**.(![js|css])*
30. rake assets:precompile
32. Fin.