Download to read offline
Uploaded byDamian Galarza
Rails3 asset-pipeline
The document discusses the Rails 3 Asset Pipeline, which provides a framework for compiling and managing static assets like CSS, JavaScript and images. Key points: - It concatenates, minifies and caches assets for improved performance. Sass and CoffeeScript are supported out of the box. - Assets are stored in app/assets, vendor/assets and compiled to public/assets. Sprockets handles asset organization and dependencies. - Asset tags and helpers reference assets through digest URLs rather than direct paths for caching. Precompilation packs assets for production. - Compass and custom asset organization/dependencies can be used. A CDN can host assets for improved load times.
Rails3 asset-pipeline
- 1. Rails 3 AssetPipeline
- 2.
- 3. http://www.qfive.com @qfivesports
- 4. What is theAsset Pipeline? • Build system for your static assets • Javascript • CSS • Images
- 5. What is theAsset 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.
- 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.
- 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.
- 17.
- 18.
- 19. Cache-Control HTTP header tomax-age=31536000 (1 year)
- 20. JS Minifcation • Handledby uglifier gem by default
- 21. Using a CDN config.action_controller.asset_host= "http://yourhost.cloudfront.net"
- 22.
- 23. Sprockets Precompile • ERBfiles: • layout.js.erb • layout.js.coffee.erb
- 24.
- 25.
- 26. Referencing Assets • sass-railsrewrite 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.
- 30. bundle exec rakeassets:precompile
- 31.
- 32.
- 33.
- 34.
- 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.
- 38. Not everything belongs in application.js
- 39. config.assets.precompile += %w{profile.jsmobile_application.js}
- 40. Make use of dependencybuilding
- 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.