Asset Pipeline (2)
ROR lab. DD-1- The 9th round -
July 31, 2013
Hyoseong Choi
Assets
• javascripts
• stylesheets
• images
• fonts
• videos
• audios
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
Sprockets
• concatenate
• minimize or compress
• using high-level languages
for Assets
Assets-writing Languages
• CoffeeScript
• Sass
• ERB
• others
javascript
stylesheet
ruby code
*.js.coffee
*.css.scss
*.js.coffee.erb
*.css.scss.erb
If you don’t want
• in Application.rb
config.assets.enabled = false
$ rails new appname --skip-sprockets
• on creating a new application
레일스
4%에서는?
Cache Busting
• MD5 fingerprinting
global-908e25f4bf641868d8683022a5b62f54.css
a hash of the content
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
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)}
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)
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'
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] %>
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
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
?
`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)
Server -e option
$ rails s (-e development)
$ rails s -e production
Environments
In development mode
In production mode
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로 지정해 둠.
Before Deploy
• For the simulation of Production Environment in local machine
2. Precompile assets
$ RAILS_ENV=production rake assets:precompile
결과로, public/assets 디렉토리가 생성되고 컴파일된 자원들이 fingerprinting되어 위치하게 됨.
Before Deploy
• For the simulation of Production Environment in local machine
3. Run local Web Server in production mode
$ rails s -e production
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 웹서버가 컴파일된 파일들을 로드하기 때문.
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 :
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
ROR Lab.
감사합니다.����������� ������������������