Rails 3.1 Asset Pipeline

Rails 3.1: Asset Pipeline James Daniels

About me @danielsju6 Boston, MA Entrepreneur & Rails Developer; Founder of@marginleft, @accelgolf, lead on @appblade, overuser of CamelCase, and a @techstars Boston Alum

appblade.comMakes mobile provisioning, beta tests,and enterprise deployments not suck. SERIOUSLY CHECK IT OUT.

Rails 3.1: Asset Pipeline “Like a boss” James Daniels

The problem

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

The problem• /public is a fucking junk drawer

The solution/app /assets /javascripts /stylesheets /images/lib /assets /.../vendor /assets /...

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 /...

The solution//= require_tree .requires app/assets/javascripts/**/*

The solution/= require_tree ./= require_self/= require_directory ‘posts’/= include ‘file’/= depend_on ‘file.png’/= provide ‘something’

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

Features• Cache friendly static ﬁlenames application‐908e25f4bf641868d8683022a5b62f54.css• Asset organization• Links to assets• Pre-processing projects.css.scss.erb• Post-processing

Sprockets• Manifest ﬁles 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 .

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)

Javascript compression• config.assets.js_compressor = :uglifier• Uses execjs which needs to have a javascript runtime node.js, ‘therubyracer’, ‘mustang’, etc.

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; }

Checkout Bourbon • Vendor speciﬁc 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

Asset dependencies/* *= require blueprint/reset *= require blueprint/typography */body { background: url(<%= asset_path "fuck_coffeescript_this_is_cool.png" %>);}

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

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

That’s all folks• gem install rails --pre• Rails guides are being updated

Rails 3.1 Asset Pipeline

by James Daniels on Aug 10, 2011

Accessibility

Categories

Upload Details

Usage Rights

1 Embed 5

Statistics

Rails 3.1 Asset Pipeline Presentation Transcript