Your SlideShare is downloading. ×
0
Rails 3.1 Asset Pipeline
Rails 3.1 Asset Pipeline
Rails 3.1 Asset Pipeline
Rails 3.1 Asset Pipeline
Rails 3.1 Asset Pipeline
Rails 3.1 Asset Pipeline
Rails 3.1 Asset Pipeline
Rails 3.1 Asset Pipeline
Rails 3.1 Asset Pipeline
Rails 3.1 Asset Pipeline
Rails 3.1 Asset Pipeline
Rails 3.1 Asset Pipeline
Rails 3.1 Asset Pipeline
Rails 3.1 Asset Pipeline
Rails 3.1 Asset Pipeline
Rails 3.1 Asset Pipeline
Rails 3.1 Asset Pipeline
Rails 3.1 Asset Pipeline
Rails 3.1 Asset Pipeline
Rails 3.1 Asset Pipeline
Rails 3.1 Asset Pipeline
Rails 3.1 Asset Pipeline
Rails 3.1 Asset Pipeline
Rails 3.1 Asset Pipeline
Rails 3.1 Asset Pipeline
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Rails 3.1 Asset Pipeline

1,887

Published on

Going over the Rails 3.1 A

Going over the Rails 3.1 A

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,887
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
21
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Transcript

    • 1. Rails 3.1: Asset Pipeline James Daniels
    • 2. About me @danielsju6 Boston, MA Entrepreneur & Rails Developer; Founder of@marginleft, @accelgolf, lead on @appblade, overuser of CamelCase, and a @techstars Boston Alum
    • 3. appblade.comMakes mobile provisioning, beta tests,and enterprise deployments not suck. SERIOUSLY CHECK IT OUT.
    • 4. Rails 3.1: Asset Pipeline “Like a boss” James Daniels
    • 5. The problem
    • 6. The problem
    • 7. The problem
    • 8. 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
    • 9. The problem• /public is a fucking junk drawer
    • 10. The solution/app /assets /javascripts /stylesheets /images/lib /assets /.../vendor /assets /...
    • 11. The solution/app /assets gem ‘jquery-rails’ /javascripts /stylesheets //=
require
modernizr /images //=
require
jquery //=
require
jquery_ujs/lib //=
require
jqueryui /assets //=
require
underscore /... //=
require
backbone //=
require_tree
./vendor /assets /...
    • 12. The solution//=
require_tree
.requires
app/assets/javascripts/**/*
    • 13. The solution/= require_tree ./= require_self/= require_directory ‘posts’/= include ‘file’/= depend_on ‘file.png’/= provide ‘something’
    • 14. 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
    • 15. Features• Cache friendly static filenames application‐908e25f4bf641868d8683022a5b62f54.css• Asset organization• Links to assets• Pre-processing projects.css.scss.erb• Post-processing
    • 16. 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
.
    • 17. Coffeescript... meh• Language that compiles to javascript hopefully Mark convinced you and me on this # Assignment: # Objects: number = 42 math = opposite = true root: Math.sqrt square: square cube: (x) -> x * square x # Conditions: number = -42 if opposite # Splats: race = (winner, runners...) -> # Functions: print winner, runners square = (x) -> x * x # Existence: alert "I knew it!" if elvis? # Arrays: list = [1, 2, 3, 4, 5] # Array comprehensions: cubes = (math.cube num for num in list)
    • 18. Javascript compression• config.assets.js_compressor
=
:uglifier• Uses execjs which needs to have a javascript runtime node.js, ‘therubyracer’, ‘mustang’, etc.
    • 19. 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; }
    • 20. Checkout Bourbon • Vendor specific SCSS helpers#Functions #Mixins #More mixins-------------------------------- -------------------------------- -------------------------------- compact(*args) animation @ inline-block golden-ratio(*args) @ animation(*args) @ linear-gradient(*args) linear-gradient(*args) @ animation-basic(*args) @ radial-gradient(*args) grid-width(*args) @ animation-delay(*args) @ transform(*args) shade(*args) @ animation-direction(*args) tint(*args) @ animation-duration(*args) transition @ animation-fill-mode(*args) @ transition(*args) @ animation-iteration-count(*args) @ transition-delay(*args)#Addons @ animation-name(*args) @ transition-duration(*args)-------------------------------- @ animation-play-state(*args) @ transition-property(*args) animation-keyframes (fade-in, fade-out) @ animation-timing-function(*args) @ transition-timing-function(*args)@ button(*args)@ position(*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
    • 21. Asset dependencies/* *= require blueprint/reset *= require blueprint/typography */body {  background: url(<%= asset_path "fuck_coffeescript_this_is_cool.png" %>);}
    • 22. TiltENGINE FILE EXTENSIONS REQUIRED LIBRARIES-------------------------- ----------------------- ----------------------------ERB .erb, .rhtml none (included ruby stdlib)Interpolated String .str none (included ruby core)Erubis .erb, .rhtml, .erubis erubisHaml .haml hamlSass .sass haml (< 3.1) or sass (>= 3.1)Scss .scss haml (< 3.1) or sass (>= 3.1)Less CSS .less lessBuilder .builder builderLiquid .liquid liquidRDiscount .markdown, .mkd, .md rdiscountRedcarpet .markdown, .mkd, .md redcarpetBlueCloth .markdown, .mkd, .md blueclothKramdown .markdown, .mkd, .md kramdownMaruku .markdown, .mkd, .md marukuRedCloth .textile redclothRDoc .rdoc rdocRadius .radius radiusMarkaby .mab markabyNokogiri .nokogiri nokogiriCoffeeScript .coffee coffee-script (+ javascript)Creole (Wiki markup) .wiki, .creole creoleWikiCloth (Wiki markup) .wiki, .mediawiki, .mw wikiclothYajl .yajl yajl-ruby
    • 23. 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
    • 24. That’s all folks• gem install rails --pre• Rails guides are being updated

    ×