Asset Pipeline in Ruby on Rails
4 likes4,088 views
The document discusses the Rails asset pipeline. It describes how the pipeline works, including: - Assets are compiled, concatenated, and fingerprinted by the Sprockets gem. - Assets can be written in languages like CoffeeScript and Sass. - The pipeline includes assets from app/assets, lib/assets, and vendor/assets. - Assets are precompiled for production to improve performance.
![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] %>](https://image.slidesharecdn.com/ap1-09-130730185521-phpapp02/85/Asset-Pipeline-in-Ruby-on-Rails-12-320.jpg)
Asset Pipeline in Ruby on Rails
- 1. Asset Pipeline (2) ROR lab. DD-1 - The 9th round - July 31, 2013 Hyoseong Choi
- 2. Assets • javascripts • stylesheets • images • fonts • videos • audios
- 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. Sprockets • concatenate • minimize or compress • using high-level languages for Assets
- 5. Assets-writing Languages • CoffeeScript • Sass • ERB • others javascript stylesheet ruby code *.js.coffee *.css.scss *.js.coffee.erb *.css.scss.erb
- 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. Cache Busting • MD5 fingerprinting global-908e25f4bf641868d8683022a5b62f54.css a hash of the content
- 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. 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. 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. 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. 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. 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. 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. `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. Server -e option $ rails s (-e development) $ rails s -e production Environments In development mode In production mode
- 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. Before Deploy • For the simulation of Production Environment in local machine 2. Precompile assets $ RAILS_ENV=production rake assets:precompile 결과로, public/assets 디렉토리가 생성되고 컴파일된 자원들이 fingerprinting되어 위치하게 됨.
- 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. 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. 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. 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. ROR Lab. 감사합니다.