Download - Asset Pipeline in Ruby on Rails
![Page 1: Asset Pipeline in Ruby on Rails](https://reader034.vdocuments.us/reader034/viewer/2022042813/54b7b1a44a795939708b45bb/html5/thumbnails/1.jpg)
Asset Pipeline (2)
ROR lab. DD-1- The 9th round -
July 31, 2013
Hyoseong Choi
![Page 2: Asset Pipeline in Ruby on Rails](https://reader034.vdocuments.us/reader034/viewer/2022042813/54b7b1a44a795939708b45bb/html5/thumbnails/2.jpg)
Assets
• javascripts
• stylesheets
• images
• fonts
• videos
• audios
![Page 3: Asset Pipeline in Ruby on Rails](https://reader034.vdocuments.us/reader034/viewer/2022042813/54b7b1a44a795939708b45bb/html5/thumbnails/3.jpg)
ApplicationRails
Pipeline
Web ServerNginx
Apache
Middleware Sprockets
Three pipelines• app/assets• lib/assets• vendor/assets
• public/assets
sinceRails 3.1
fingerprinting static assets
rake assets:precompile
![Page 4: Asset Pipeline in Ruby on Rails](https://reader034.vdocuments.us/reader034/viewer/2022042813/54b7b1a44a795939708b45bb/html5/thumbnails/4.jpg)
Sprockets
• concatenate
• minimize or compress
• using high-level languages
for Assets
![Page 5: Asset Pipeline in Ruby on Rails](https://reader034.vdocuments.us/reader034/viewer/2022042813/54b7b1a44a795939708b45bb/html5/thumbnails/5.jpg)
Assets-writing Languages
• CoffeeScript
• Sass
• ERB
• others
javascript
stylesheet
ruby code
*.js.coffee
*.css.scss
*.js.coffee.erb
*.css.scss.erb
![Page 6: Asset Pipeline in Ruby on Rails](https://reader034.vdocuments.us/reader034/viewer/2022042813/54b7b1a44a795939708b45bb/html5/thumbnails/6.jpg)
If you don’t want
• in Application.rb
config.assets.enabled = false
$ rails new appname --skip-sprockets
• on creating a new application
레일스
4%에서는?
![Page 7: Asset Pipeline in Ruby on Rails](https://reader034.vdocuments.us/reader034/viewer/2022042813/54b7b1a44a795939708b45bb/html5/thumbnails/7.jpg)
Cache Busting
• MD5 fingerprinting
global-908e25f4bf641868d8683022a5b62f54.css
a hash of the content
![Page 8: Asset Pipeline in Ruby on Rails](https://reader034.vdocuments.us/reader034/viewer/2022042813/54b7b1a44a795939708b45bb/html5/thumbnails/8.jpg)
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 rubyimage-url, in sass => image_url in rubyasset-path, in sass => asset_path in rubyimage-path, in sass=> image_path in ruby
hyphenated in sass, underscored in ruby
![Page 9: Asset Pipeline in Ruby on Rails](https://reader034.vdocuments.us/reader034/viewer/2022042813/54b7b1a44a795939708b45bb/html5/thumbnails/9.jpg)
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%2F4AAQSkZJRgABAQEASABIAADzUQB7i1uNbtRBPry3Xge2E42x6dsEAQBAcHxTC2z8QxVrmj3C6Yp58%2FCycDDHHyc3un0Czur64ZXK%2FQ79JZt0M83ulvfYru6EA%2B7yd%2BBx%2B74eo5fRddVivr6u....
%2B8eY39V5Wo9mzh5qN16fsPNHjdHMXClp60mWncWTMOcA4c0j8QV46nKmfoYySe6Oz4Iv1VdbfUw151T0bgx0521gjIz%2FMMb)}
![Page 10: Asset Pipeline in Ruby on Rails](https://reader034.vdocuments.us/reader034/viewer/2022042813/54b7b1a44a795939708b45bb/html5/thumbnails/10.jpg)
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)
![Page 11: Asset Pipeline in Ruby on Rails](https://reader034.vdocuments.us/reader034/viewer/2022042813/54b7b1a44a795939708b45bb/html5/thumbnails/11.jpg)
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'
![Page 12: Asset Pipeline in Ruby on Rails](https://reader034.vdocuments.us/reader034/viewer/2022042813/54b7b1a44a795939708b45bb/html5/thumbnails/12.jpg)
Controller-specific Assets
*.js.coffeeand
*.css.scss
a javascriptand
a stylesheet
a scaffoldor
a controller
Generator
<%= javascript_include_tag params[:controller] %> <%= stylesheet_link_tag params[:controller] %>
![Page 13: Asset Pipeline in Ruby on Rails](https://reader034.vdocuments.us/reader034/viewer/2022042813/54b7b1a44a795939708b45bb/html5/thumbnails/13.jpg)
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
![Page 14: Asset Pipeline in Ruby on Rails](https://reader034.vdocuments.us/reader034/viewer/2022042813/54b7b1a44a795939708b45bb/html5/thumbnails/14.jpg)
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
?
![Page 15: Asset Pipeline in Ruby on Rails](https://reader034.vdocuments.us/reader034/viewer/2022042813/54b7b1a44a795939708b45bb/html5/thumbnails/15.jpg)
`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)
![Page 16: Asset Pipeline in Ruby on Rails](https://reader034.vdocuments.us/reader034/viewer/2022042813/54b7b1a44a795939708b45bb/html5/thumbnails/16.jpg)
Server -e option
$ rails s (-e development)
$ rails s -e production
Environments
In development mode
In production mode
![Page 17: Asset Pipeline in Ruby on Rails](https://reader034.vdocuments.us/reader034/viewer/2022042813/54b7b1a44a795939708b45bb/html5/thumbnails/17.jpg)
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로 지정해 둠.
![Page 18: Asset Pipeline in Ruby on Rails](https://reader034.vdocuments.us/reader034/viewer/2022042813/54b7b1a44a795939708b45bb/html5/thumbnails/18.jpg)
Before Deploy
• For the simulation of Production Environment in local machine
2. Precompile assets
$ RAILS_ENV=production rake assets:precompile
결과로, public/assets 디렉토리가 생성되고 컴파일된 자원들이 fingerprinting되어 위치하게 됨.
![Page 19: Asset Pipeline in Ruby on Rails](https://reader034.vdocuments.us/reader034/viewer/2022042813/54b7b1a44a795939708b45bb/html5/thumbnails/19.jpg)
Before Deploy
• For the simulation of Production Environment in local machine
3. Run local Web Server in production mode
$ rails s -e production
![Page 20: Asset Pipeline in Ruby on Rails](https://reader034.vdocuments.us/reader034/viewer/2022042813/54b7b1a44a795939708b45bb/html5/thumbnails/20.jpg)
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 웹서버가 컴파일된 파일들을 로드하기 때문.
![Page 21: Asset Pipeline in Ruby on Rails](https://reader034.vdocuments.us/reader034/viewer/2022042813/54b7b1a44a795939708b45bb/html5/thumbnails/21.jpg)
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 :
![Page 22: Asset Pipeline in Ruby on Rails](https://reader034.vdocuments.us/reader034/viewer/2022042813/54b7b1a44a795939708b45bb/html5/thumbnails/22.jpg)
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
![Page 23: Asset Pipeline in Ruby on Rails](https://reader034.vdocuments.us/reader034/viewer/2022042813/54b7b1a44a795939708b45bb/html5/thumbnails/23.jpg)
ROR Lab.
감사합니다.����������� ������������������