Assets on Rails na Prática

by Ramon Bispo

Slide 1

Slide 1 text

RAMON BISPO http://ramonpage.com @ramonpage ASSETS ON RAILS NA PRÁTICA ENTENDENDO, CONFIGURANDO E APLICANDO

Slide 2

Slide 2 text

ASSET PACKAGING NO RAILS @RAMONPAGE

Slide 3

Slide 3 text

UM POUCO DE HISTÓRIA Rails < 3.1 - Jammit http://documentcloud.github.com/jammit/ - Asset Packager https://github.com/sbecker/asset_packager Rails 3.1+ - Sprockets https://github.com/sstephenson/sprockets @RAMONPAGE

Slide 4

Slide 4 text

@RAMONPAGE RAILS 3.1+ ASSET PIPELINE config.assets.enabled = true

Slide 5

Slide 5 text

@RAMONPAGE RAILS 3.1+ ASSET PIPELINE FINGERPRINTING /stylesheets/styles.css?2509895876 styles.css => styles-908e25f4bf641868d8683022a5b62f54.css

Slide 6

Slide 6 text

ESTRUTURA DOS ASSETS NO RAILS @RAMONPAGE ↳ app ↳ assets ↳ images - ... ↳ javascripts - application.js - ... ↳ stylesheets - application.css - ... ↳ ...

Slide 7

Slide 7 text

@RAMONPAGE ENTENDENDO OS MANIFESTOS application.js //= require jquery //= require jquery_ujs //= require_tree . application.css /* *= require_self *= require_tree . */

Slide 8

Slide 8 text

@RAMONPAGE MAIS SOBRE ASSET PIPELINE RAILS GUIDES http://guides.rubyonrails.org/asset_pipeline.html

Slide 9

Slide 9 text

ENTENDENDO PRÉ-PROCESSADORES @RAMONPAGE COFFEESCRIPT http://jashkenas.github.com/coffee-script/ SASS http://sass-lang.com/ COMPASS http://compass-style.org/

Slide 10

Slide 10 text

@RAMONPAGE SASS EM USO .CSS .content-navigation { border-color: #3bbfce; color: #2b9eab; } .border { padding: 8px; margin: 8px; border-color: #3bbfce; } .SASS $blue: #3bbfce $margin: 16px .content-navigation border-color: $blue color: darken($blue, 9%) .border padding: $margin / 2 margin: $margin / 2 border-color: $blue