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

Assets on Rails na Prática

Ramon Bispo
December 17, 2012

Assets on Rails na Prática

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

Ramon Bispo

December 17, 2012
Tweet

More Decks by Ramon Bispo

Other Decks in Programming

Transcript

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

    View Slide

  2. ASSET PACKAGING
    NO RAILS
    @RAMONPAGE

    View Slide

  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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

  11. @RAMONPAGE
    NÃO GOSTOU?
    DÊ UMA OLHADA NO LESS
    http://lesscss.org/

    View Slide

  12. SHOW ME
    THE CODE
    @RAMONPAGE

    View Slide

  13. RAMON BISPO
    http://ramonpage.com
    @ramonpage
    OBRIGADO!

    View Slide