This document discusses asset packaging in Rails, including an overview of its history and how it works in Rails 3.1+. It explains the asset pipeline, fingerprinting, file organization, manifests, and using preprocessors like Sass and CoffeeScript. The document encourages reviewing the Rails guides and Less as an alternative to Sass.

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

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. RAILS 3.1+
ASSET PIPELINE
config.assets.enabled = true
@RAMONPAGE

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

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

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

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

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

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

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

12. SHOW ME
THE CODE
@RAMONPAGE

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