Asset Pipeline in Ruby on Rails

3,765 views

Published on

for ROR Lab Offline Lecture

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

No Downloads
Views
Total views
3,765
On SlideShare
0
From Embeds
0
Number of Embeds
1,765
Actions
Shares
0
Downloads
12
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Asset Pipeline in Ruby on Rails

  1. 1. Asset Pipeline (2) ROR lab. DD-1 - The 9th round - July 31, 2013 Hyoseong Choi
  2. 2. Assets • javascripts • stylesheets • images • fonts • videos • audios
  3. 3. Application Rails Pipeline Web Server Nginx Apache Middleware Sprockets Three pipelines • app/assets • lib/assets • vendor/assets • public/assets since Rails 3.1 finger printing static assets rakeass ets:precompile
  4. 4. Sprockets • concatenate • minimize or compress • using high-level languages for Assets
  5. 5. Assets-writing Languages • CoffeeScript • Sass • ERB • others javascript stylesheet ruby code *.js.coffee *.css.scss *.js.coffee.erb *.css.scss.erb
  6. 6. If you don’t want • in Application.rb config.assets.enabled = false $ rails new appname --skip-sprockets • on creating a new application 레일스 4%에서는?
  7. 7. Cache Busting • MD5 fingerprinting global-908e25f4bf641868d8683022a5b62f54.css a hash of the content
  8. 8. CSS and Sass body { background: asset-url('image.jpg'); background: image-url('image.jpg'); background: url(asset-path('image.jpg')); background: url(image-path('image.jpg')); } *.scss on `sass-rails` gem asset-url, in sass => asset_url, in ruby image-url, in sass => image_url in ruby asset-path, in sass => asset_path in ruby image-path, in sass=> image_path in ruby hyphenated in sass, underscored in ruby
  9. 9. CSS & ERB using data URI #logo { background: url(<%= asset_data_uri 'logo.png' %>) } a method of embedding the image data directly into the CSS file #logo{background:url(data:image/png;base64,%2F9j %2F4AAQSkZJRgABAQEASABIAADzUQB7i1uNbtRBPry3Xge2E42x6dsEAQBAcH xTC2z8QxVrmj3C6Yp58%2FCycDDHHyc3un0Czur64ZXK %2FQ79JZt0M83ulvfYru6EA%2B7yd%2BBx%2B74eo5fRddVivr6u .... %2B8eY39V5Wo9mzh5qN16fsPNHjdHMXClp60mWncWTMOcA4c0j8QV46nKmfoY ySe6Oz4Iv1VdbfUw151T0bgx0521gjIz%2FMMb)}
  10. 10. To add pipelines config.assets.paths << Rails.root.join("lib", "videoplayer", "flash") in config/application.rb lib/videoplayer/flash/abc.css.scss *= require abc (in application.css) lib/videoplayer/flash/abc.js.coffee /= require abc (in application.js)
  11. 11. production.rb • config.assets.enabled = true • config.assets.precompile += %w(*.png *.jpg *.jpeg *.gif) • config.assets.compress = true • config.assets.js_compressor = :uglifier • config.assets.css_compressor = :sass • config.serve_static_assets = true • config.assets.digest = true • config.assets.version = '1.0'
  12. 12. Controller-specific Assets *.js.coffee and *.css.scss a javascript and a stylesheet a scaffold or a controller Generator <%= javascript_include_tag params[:controller] %> <%= stylesheet_link_tag params[:controller] %>
  13. 13. Precompile Assets # Do not fallback to assets pipeline if a precompiled asset is missed. config.assets.compile = false $ RAILS_ENV=production rake assets:precompile in config/environments/production.rb in terminal console on deployment with Capistrano $ cap deploy:assets:precompile
  14. 14. Compile Assets # Do not fallback to assets pipeline if a precompiled asset is missed. config.assets.compile = true $ RAILS_ENV=production rake assets:precompile in config/environments/production.rb in terminal console on deployment with Capistrano $ cap deploy:assets:precompile ?
  15. 15. `Manifest` File • to make a whitelist of assets included and served • to build a single CSS or javascript file • Directives : ★ `require` ★ `require_tree` (with recursion) ★ `require_directory` (without recursion)
  16. 16. Server -e option $ rails s (-e development) $ rails s -e production Environments In development mode In production mode
  17. 17. Before Deploy • For the simulation of Production Environment in local machine 1. Check config/production.rb config.serve_static_assets = false true 로컬머신에서 production mode로 웹서버를 실행하면 어플리케 이션 서버(webrick, puma, thin...)가 static assets을 인식 못함. 따라서 레일스가 이를 대신할 수 있도록 true로 지정해 둠.
  18. 18. Before Deploy • For the simulation of Production Environment in local machine 2. Precompile assets $ RAILS_ENV=production rake assets:precompile 결과로, public/assets 디렉토리가 생성되고 컴파일된 자원들이 fingerprinting되어 위치하게 됨.
  19. 19. Before Deploy • For the simulation of Production Environment in local machine 3. Run local Web Server in production mode $ rails s -e production
  20. 20. Before Deploy • For the simulation of Production Environment in local machine 4. Revert config/production.rb to config.serve_static_assets = true false production mode로 시뮬레이션 작업이 끝나고 실제 원격 운영 서버로 배포하기 전에 false 값으로 되돌려 놓음. 이유는,Apache 나 Nginx 웹서버가 컴파일된 파일들을 로드하기 때문.
  21. 21. Deploy after Local Precompilation • not have write access to your production file system • deploying to more than one server • doing frequent deploys that do not include asset changes Indications :
  22. 22. Deploy after Local Precompilation • not run the Capistrano deployment task that precompiles assets. • change the following two application configuration settings Treatments : config.assets.prefix = "/dev-assets" config.assets.initialize_on_precompile = false config/environments/development.rb config/application.rb
  23. 23. ROR Lab. 감사합니다.

×