Int

1. Rails 3 Asset Pipeline

2. Damian Galarza
http://www.damiangalarza.com
@dgalarza

3. http://www.qfive.com
@qfivesports

4. What is the Asset
Pipeline?
• Build system for your static assets
• Javascript
• CSS
• Images

5. What is the Asset
Pipeline?
• Sass and Coffeescript support by default
• Minifies and concatenates resources

6. Defaults
source 'https://rubygems.org'
gem 'rails', '3.2.5'
# Gems used only for assets and not required
# in production environments by default.
group :assets do
gem 'sass-rails', '~> 3.2.3'
gem 'coffee-rails', '~> 3.2.1'
# See https://github.com/sstephenson/execjs#readme for
more supported runtimes
# gem 'therubyracer', :platforms => :ruby
gem 'uglifier', '>= 1.0.3'
end
gem 'jquery-rails'

7. Storing Assets

8. app/
asssets/
javascripts/
stylesheets/
images/
vendor/
assets/
javascripts/
stylesheets/
public/
assets/

9. app/
asssets/
javascripts/
application.js
stylesheets/
application.css
images/
rails.png

10. vendor/
assets/
javascripts/
jquery.masonry.js
tagit.js
stylesheets/
tagit.css

11. public/
assets/
application-e4b51606cd77f.js
rails-e4b51606cd77fda26.png
application-e4b51606cd77fd.css

12. Sprockets
https://github.com/sstephenson/
sprockets

13. Sprockets
Javascript
//= require core.js
//= require jquery.infinitescroll
//= require jquery.masonry.min
//= require jquery.backstretch.min
//= require bootstrap-alert
//= require bootstrap-dropdown
//= require bootstrap-modal
//= require bootstrap-tab
//= require_self
application.js

14. Sprockets
CSS
/**
*= require "bootstrap_and_overrides";
*= require 'sprites';
*= require 'layout';
*= require 'typography';
*= require 'admin';
*= require 'clubs';
*= require 'posts';
*= require 'sharing';
*= require 'tags';
*= require 'topics';
*= require 'users';
*= require 'welcome';
*= require 'responsive';
*= require 'landing_pages';
*/
application.css

15. Sprockets
= stylesheet_link_tag "application"
= javascript_include_tag "application"

16. Sprockets

17. Sprockets

18. Sprockets
application-7e817f92bce80b73114a04de53d57b80.js

19. Cache-Control
HTTP header to max-age=31536000
(1 year)

20. JS Minifcation
• Handled by uglifier gem by default

21. Using a CDN
config.action_controller.asset_host = "http://yourhost.cloudfront.net"

22. Referencing Assets

23. Sprockets Precompile
• ERB files:
• layout.js.erb
• layout.js.coffee.erb

24. Referencing Assets
$.backstretch('<%= asset_path("bg-image-field-large.jpg") %>');

25. Referencing Assets
$.backstretch("/assets/field-at-night-bw-noise-4cdc7135443f06bdd3857a56a4bf7521.jpg")

26. Referencing Assets
• sass-rails rewrite of helpers:
• image-url / image - path

27. Referencing Assets
#mobile-container {
! background: image-url('tour-program-mobile.jpg') no-repeat;
}

28. Referencing Assets
#mobile-container {
! background: url("/assets/tour-program-mobile-bdf25b7b3d9971aa362eeb90bf6b4bb6.jpg");
}

29. Precompiling

30. bundle exec rake assets:precompile

31. Capistrano
load 'deploy/assets'

32. Using Compass

33. gem 'compass-rails'

34. Use @import

35. /**
*= require "bootstrap_and_overrides";
*= require 'sprites';
*= require 'layout';
*= require 'typography';
*= require 'admin';
*= require 'clubs';
*= require 'posts';
*= require 'sharing';
*= require 'tags';
*= require 'topics';
*= require 'users';
*= require 'welcome';
*= require 'responsive';
*= require 'landing_pages';
*/

36. @import "bootstrap_and_overrides";
@import 'sprites';
@import 'layout';
@import 'typography';
@import 'admin';
@import 'clubs';
@import 'posts';
@import 'sharing';
@import 'tags';
@import 'topics';
@import 'users';
@import 'welcome';
@import 'responsive';
@import 'landing_pages';

37. Organize

38. Not everything belongs
in application.js

39. config.assets.precompile += %w{profile.js mobile_application.js}

40. Make use of
dependency building

41. core.js
//= require jquery
//= require jquery.ui.autocomplete
//= require jquery_ujs
//= require tagit
//= require underscore
//= require jquery.infinitescroll
//= require jquery.backstretch.min
//= require bootstrap-transition
//= require bootstrap-collapse
//= require bootstrap-tab
//= require handlebars-1.0.0.beta.6.js
//= require jwplayer.js
//= require relative-date
//= require 'facebook'
//= require 'comments'
//= require 'layout'
//= require 'posts'
//= require 'sharing'
//= require 'users'
//= require_self

42. application.js
//= require core.js
//= require jquery.effects.blind
//= require jquery.infinitescroll
//= require jquery.masonry.min
//= require jquery.backstretch.min
//= require jquery.preview.full
//= require jquery.truncator
//= require jquery.panda-uploader.js
//= require bootstrap-alert
//= require bootstrap-dropdown
//= require bootstrap-modal
//= require bootstrap-tab
//= require gmaps4rails/googlemaps
//= require 'sign-in'
//= require_self

43. mobile_application.js
// Optimized mobile application js
//= require core.js
//= require mobile_modals.js

44. Dependencies
#= require_tree ./posts
$ ->
Post.embedlyPreview('#post_link_url')
Post.embedlyPreview('#post_video_url')
replaceTimesWithRelativeStrings()
setupTagging()
setupPanda()
loadVideo()
setupVideoPostOptions()
setupShareLinks()
setupInfiniteScroll()
posts.js

45. Questions?