Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Assets on Rails na Prática

649756bec88883f16a9bcd7a106533a1?s=47 Ramon Bispo
December 17, 2012

Assets on Rails na Prática

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

649756bec88883f16a9bcd7a106533a1?s=128

Ramon Bispo

December 17, 2012
Tweet

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!