Rails 3 Asset Pipeline
Damian Galarzahttp://www.damiangalarza.com          @dgalarza
http://www.qfive.com    @qfivesports
What is the Asset         Pipeline?• Build system for your static assets  • Javascript  • CSS  • Images
What is the Asset         Pipeline?• Sass and Coffeescript support by default• Minifies and concatenates resources
Defaultssource https://rubygems.orggem rails, 3.2.5# Gems used only for assets and not required# in production environment...
Storing Assets
app/	 asssets/	 	 javascripts/	 	 stylesheets/	 	 images/	 	vendor/	 assets/	 	 javascripts/	 	 stylesheets/	 	public/	 as...
app/	 asssets/	 	 javascripts/   application.js	 	 stylesheets/	 	 	 application.css	 	 images/	 	 	 rails.png
vendor/	 assets/	 	 javascripts/	 	 	 jquery.masonry.js	 	 	 tagit.js	 	 stylesheets/	 	 	 tagit.css
public/	 assets/	 	 application-e4b51606cd77f.js	 	 rails-e4b51606cd77fda26.png	 	 application-e4b51606cd77fd.css
Sprocketshttps://github.com/sstephenson/            sprockets
Sprockets                 Javascript//=   require core.js//=   require jquery.infinitescroll//=   require jquery.masonry.m...
Sprockets                  CSS/***= require   "bootstrap_and_overrides";*= require   sprites;*= require   layout;*= requir...
Sprockets  = stylesheet_link_tag "application"= javascript_include_tag "application"
Sprockets
Sprockets
Sprocketsapplication-7e817f92bce80b73114a04de53d57b80.js
Cache-ControlHTTP header to max-age=31536000           (1 year)
JS Minifcation• Handled by uglifier gem by default
Using a CDNconfig.action_controller.asset_host = "http://yourhost.cloudfront.net"
Referencing Assets
Sprockets Precompile• ERB files: • layout.js.erb • layout.js.coffee.erb
Referencing Assets$.backstretch(<%= asset_path("bg-image-field-large.jpg") %>);
Referencing Assets$.backstretch("/assets/field-at-night-bw-noise-4cdc7135443f06bdd3857a56a4bf7521.jpg")
Referencing Assets• sass-rails rewrite of helpers:  • image-url / image - path
Referencing Assets#mobile-container {! background: image-url(tour-program-mobile.jpg) no-repeat;}
Referencing Assets#mobile-container {! background: url("/assets/tour-program-mobile-bdf25b7b3d9971aa362eeb90bf6b4bb6.jpg");}
Precompiling
bundle exec rake assets:precompile
Capistranoload deploy/assets
Using Compass
gem compass-rails
Use @import
/***= require   "bootstrap_and_overrides";*= require   sprites;*= require   layout;*= require   typography;*= require   ad...
@import   "bootstrap_and_overrides";@import   sprites;@import   layout;@import   typography;@import   admin;@import   club...
Organize
Not everything belongs   in application.js
config.assets.precompile += %w{profile.js mobile_application.js}
Make use ofdependency building
core.js//=   require jquery//=   require jquery.ui.autocomplete//=   require jquery_ujs//=   require tagit//=   require un...
application.js//=   require core.js//=   require jquery.effects.blind//=   require jquery.infinitescroll//=   require jque...
mobile_application.js  // Optimized mobile application js  //= require core.js  //= require mobile_modals.js
Dependencies#= require_tree ./posts$ ->  Post.embedlyPreview(#post_link_url)  Post.embedlyPreview(#post_video_url)  replac...
Questions?
Upcoming SlideShare
Loading in...5
×

Rails3 asset-pipeline

742

Published on

Int

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
742
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
7
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Rails3 asset-pipeline

    1. 1. Rails 3 Asset Pipeline
    2. 2. Damian Galarzahttp://www.damiangalarza.com @dgalarza
    3. 3. http://www.qfive.com @qfivesports
    4. 4. What is the Asset Pipeline?• Build system for your static assets • Javascript • CSS • Images
    5. 5. What is the Asset Pipeline?• Sass and Coffeescript support by default• Minifies and concatenates resources
    6. 6. Defaultssource https://rubygems.orggem 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 formore supported runtimes # gem therubyracer, :platforms => :ruby gem uglifier, >= 1.0.3endgem jquery-rails
    7. 7. Storing Assets
    8. 8. app/ asssets/ javascripts/ stylesheets/ images/ vendor/ assets/ javascripts/ stylesheets/ public/ assets/
    9. 9. app/ asssets/ javascripts/ application.js stylesheets/ application.css images/ rails.png
    10. 10. vendor/ assets/ javascripts/ jquery.masonry.js tagit.js stylesheets/ tagit.css
    11. 11. public/ assets/ application-e4b51606cd77f.js rails-e4b51606cd77fda26.png application-e4b51606cd77fd.css
    12. 12. Sprocketshttps://github.com/sstephenson/ sprockets
    13. 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. 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. 15. Sprockets = stylesheet_link_tag "application"= javascript_include_tag "application"
    16. 16. Sprockets
    17. 17. Sprockets
    18. 18. Sprocketsapplication-7e817f92bce80b73114a04de53d57b80.js
    19. 19. Cache-ControlHTTP header to max-age=31536000 (1 year)
    20. 20. JS Minifcation• Handled by uglifier gem by default
    21. 21. Using a CDNconfig.action_controller.asset_host = "http://yourhost.cloudfront.net"
    22. 22. Referencing Assets
    23. 23. Sprockets Precompile• ERB files: • layout.js.erb • layout.js.coffee.erb
    24. 24. Referencing Assets$.backstretch(<%= asset_path("bg-image-field-large.jpg") %>);
    25. 25. Referencing Assets$.backstretch("/assets/field-at-night-bw-noise-4cdc7135443f06bdd3857a56a4bf7521.jpg")
    26. 26. Referencing Assets• sass-rails rewrite of helpers: • image-url / image - path
    27. 27. Referencing Assets#mobile-container {! background: image-url(tour-program-mobile.jpg) no-repeat;}
    28. 28. Referencing Assets#mobile-container {! background: url("/assets/tour-program-mobile-bdf25b7b3d9971aa362eeb90bf6b4bb6.jpg");}
    29. 29. Precompiling
    30. 30. bundle exec rake assets:precompile
    31. 31. Capistranoload deploy/assets
    32. 32. Using Compass
    33. 33. gem compass-rails
    34. 34. Use @import
    35. 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. 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. 37. Organize
    38. 38. Not everything belongs in application.js
    39. 39. config.assets.precompile += %w{profile.js mobile_application.js}
    40. 40. Make use ofdependency building
    41. 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. 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. 43. mobile_application.js // Optimized mobile application js //= require core.js //= require mobile_modals.js
    44. 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. 45. Questions?
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×