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.

감사합니다.����������� ������������������