Assets on Rails na Prática

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!