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.

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.
감사합니다.