Assets on Rails na Prática

Entendendo, configurando e aplicando a estrutura de assets do Rails.

Transcript

1. RAMON BISPO http://ramonpage.com @ramonpage ASSETS ON RAILS NA PRÁTICA ENTENDENDO, CONFIGURANDO E APLICANDO
2. ASSET PACKAGING NO RAILS @RAMONPAGE
3. 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
4. @RAMONPAGE RAILS 3.1+ ASSET PIPELINE config.assets.enabled = true
5. @RAMONPAGE RAILS 3.1+ ASSET PIPELINE FINGERPRINTING /stylesheets/styles.css?2509895876 styles.css => styles-908e25f4bf641868d8683022a5b62f54.css
6. ESTRUTURA DOS ASSETS NO RAILS @RAMONPAGE ↳ app ↳ assets ↳ images - ... ↳ javascripts - application.js - ... ↳ stylesheets - application.css - ... ↳ ...
7. @RAMONPAGE ENTENDENDO OS MANIFESTOS application.js //= require jquery //= require jquery_ujs //= require_tree . application.css /* *= require_self *= require_tree . */
8. @RAMONPAGE MAIS SOBRE ASSET PIPELINE RAILS GUIDES http://guides.rubyonrails.org/asset_pipeline.html
9. ENTENDENDO PRÉ-PROCESSADORES @RAMONPAGE COFFEESCRIPT http://jashkenas.github.com/coffee-script/ SASS http://sass-lang.com/ COMPASS http://compass-style.org/
10. @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
11. @RAMONPAGE NÃO GOSTOU? DÊ UMA OLHADA NO LESS http://lesscss.org/
12. SHOW ME THE CODE @RAMONPAGE
13. RAMON BISPO http://ramonpage.com @ramonpage OBRIGADO!