Mark J Smith - @mark_js FutureLearn - @FutureLearn Demystifying
 The
 Rails
 Asset
 Pipeline 

–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 

No content

Assets 

!"" 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 

<%= javascript_link_tag ‘application’ %> <%= stylesheet_link_tag ‘application’ %> = javascript_link_tag ‘application’ = stylesheet_link_tag ‘application’ 

!"" 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 

Easy. 

Rails - http://github.com/rails/rails Sprockets - http://github.com/sstephenson/sprockets Sprockets-Rails - http://github.com/rails/sprockets-rails 

No content

<%= javascript_link_tag ‘application’ %> <%= stylesheet_link_tag ‘application’ %> - javascript_link_tag ‘application’ - stylesheet_link_tag ‘application’ 

Rails actionview/lib/action_view/helpers/asset_tag_helper.rb ! Sprockets-Rails lib/sprockets/rails/helper.rb 

Rails actionview/lib/action_view/helpers/asset_tag_helper.rb ! Sprockets-Rails lib/sprockets/rails/helper.rb 

*Demo* 

// 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 . 

Sprockets lib/sprockets/directive_processor.rb 

<%= javascript_link_tag ‘application’ %> ! Sprockets-Rails lib/sprockets/rails/helper.rb 

No content

Sprockets lib/sprockets/server.rb ! Sprockets-Rails lib/sprockets/railtie.rb 

Sprockets lib/sprockets/resolve 

!"" 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 

Processors 

! 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' ! 

*Demo* 

In Production 

No mounted server = no Sprockets 

rake assets:precompile 

rake assets:precompile Sprockets-Rails lib/sprockets/rails/task.rb 

application.js, application.css, **/**.(![js|css])* 

rake assets:precompile 

No content

Fin.