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

Rails 3 Asset Pipeline

James Daniels
September 26, 2011

Rails 3 Asset Pipeline

James Daniels

September 26, 2011
Tweet

More Decks by James Daniels

Other Decks in Programming

Transcript

  1. About me @danielsju6 Boston, MA Entrepreneur & Rails Developer; Founder

    of @marginleft, @accelgolf, lead on @appblade, over user of CamelCase, and a @techstars Boston Alum Monday, September 26, 11
  2. appblade.com Makes mobile provisioning, beta tests, and enterprise deployments not

    suck. SERIOUSLY CHECK IT OUT. Monday, September 26, 11
  3. The problem • Third-party code mixed into yours • JS/CSS/IMG

    treated as second class citizens • Organization is fucked • JavaScript in views • Who uses :cache => true anyway Monday, September 26, 11
  4. The solution /app /assets /javascripts /stylesheets /images /lib /assets /...

    /vendor /assets /... //=  require  modernizr //=  require  jquery //=  require  jquery_ujs //=  require  jqueryui //=  require  underscore //=  require  backbone //=  require_tree  . gem ‘jquery-rails’ Monday, September 26, 11
  5. The solution /= require_tree . /= require_self /= require_directory ‘posts’

    /= include ‘file’ /= depend_on ‘file.png’ /= provide ‘something’ Monday, September 26, 11
  6. The solution • rails generate scaffold post invoke    

     assets create          app/assets/javascripts/posts.js invoke      css create          app/assets/stylesheets/users.css invoke      css create          app/assets/stylesheets/_scaffold.css Monday, September 26, 11
  7. Features • Cache friendly static filenames application-­‐908e25f4bf641868d8683022a5b62f54.css • Asset organization

    • Links to assets • Pre-processing projects.css.scss.erb • Post-processing Monday, September 26, 11
  8. Sprockets • Manifest files to load js/css app/assets/javascripts/application.js app/assets/stylesheets/application.css •

    Coffeescript, less, sass, scss, erb • Assets brought in by gems //=  require  modernizr //=  require  jquery //=  require  jquery_ujs //=  require  jqueryui //=  require  underscore //=  require  backbone //=  require_tree  . Monday, September 26, 11
  9. Coffeescript • Language that compiles to javascript hopefully Mark convinced

    you and me on this # Assignment: number = 42 opposite = true # Conditions: number = -42 if opposite # Functions: square = (x) -> x * x # Arrays: list = [1, 2, 3, 4, 5] # Objects: math = root: Math.sqrt square: square cube: (x) -> x * square x # Splats: race = (winner, runners...) -> print winner, runners # Existence: alert "I knew it!" if elvis? # Array comprehensions: cubes = (math.cube num for num in list) Monday, September 26, 11
  10. Javascript compression • Uses execjs which needs to have a

    javascript runtime node.js, ‘therubyracer’, ‘mustang’, etc. • config.assets.js_compressor  =  :uglifier Monday, September 26, 11
  11. Sass... FUCK YEAH! $blue: #3bbfce; $margin: 16px; .content-navigation { border-color:

    $blue; color: darken($blue, 9%); } .border { padding: $margin / 2; margin: $margin / 2; border-color: $blue; } Monday, September 26, 11
  12. Checkout Bourbon • Vendor specific SCSS helpers #Functions -------------------------------- compact(*args)

    golden-ratio(*args) linear-gradient(*args) grid-width(*args) shade(*args) tint(*args) #Addons -------------------------------- animation-keyframes (fade-in, fade-out) @ button(*args) @ position(*args) #Mixins -------------------------------- animation @ animation(*args) @ animation-basic(*args) @ animation-delay(*args) @ animation-direction(*args) @ animation-duration(*args) @ animation-fill-mode(*args) @ animation-iteration-count(*args) @ animation-name(*args) @ animation-play-state(*args) @ animation-timing-function(*args) @ background-image(*args) @ border-radius(*args) @ box-shadow(*args) @ box-sizing(*args) flex-box @ box(*args) @ box-align(*args) @ box-direction(*args) @ box-flex(*args) @ box-flex-group(*args) @ box-lines(*args) @ box-ordinal-group(*args) @ box-orient(*args) @ box-pack(*args) @ display-box #More mixins -------------------------------- @ inline-block @ linear-gradient(*args) @ radial-gradient(*args) @ transform(*args) transition @ transition(*args) @ transition-delay(*args) @ transition-duration(*args) @ transition-property(*args) @ transition-timing-function(*args) Monday, September 26, 11
  13. Asset dependencies /* *= require blueprint/reset *= require blueprint/typography */

    body { background: url(<%= asset_path "fuck_coffeescript_this_is_cool.png" %>); } Monday, September 26, 11
  14. Tilt ENGINE FILE EXTENSIONS REQUIRED LIBRARIES -------------------------- ----------------------- ---------------------------- ERB

    .erb, .rhtml none (included ruby stdlib) Interpolated String .str none (included ruby core) Erubis .erb, .rhtml, .erubis erubis Haml .haml haml Sass .sass haml (< 3.1) or sass (>= 3.1) Scss .scss haml (< 3.1) or sass (>= 3.1) Less CSS .less less Builder .builder builder Liquid .liquid liquid RDiscount .markdown, .mkd, .md rdiscount Redcarpet .markdown, .mkd, .md redcarpet BlueCloth .markdown, .mkd, .md bluecloth Kramdown .markdown, .mkd, .md kramdown Maruku .markdown, .mkd, .md maruku RedCloth .textile redcloth RDoc .rdoc rdoc Radius .radius radius Markaby .mab markaby Nokogiri .nokogiri nokogiri CoffeeScript .coffee coffee-script (+ javascript) Creole (Wiki markup) .wiki, .creole creole WikiCloth (Wiki markup) .wiki, .mediawiki, .mw wikicloth Yajl .yajl yajl-ruby Monday, September 26, 11
  15. Production • Pre-compilation • Capistrano before :"deploy:symlink", :"deploy:assets"; desc "Compile

    asets" task :assets do run "cd #{release_path}; RAILS_ENV=#{rails_env} bundle exec rake assets:precompile" end Monday, September 26, 11
  16. That’s all folks • gem install rails --pre • Rails

    guides are being updated Monday, September 26, 11
  17. That’s all folks • gem install rails --pre • Rails

    guides are being updated Monday, September 26, 11