Following up from my recent deep code dive into the less-rails and less-rails-bootstrap gems come some of the best hidden features of the rails asset pipeline. My talk will include a behind the scenes look of what makes the asset pipeline possible, best practices, advanced usage followed by a review of some of the top level CSS frameworks being used.
9. Tilt
Tilt is a thin interface over a bunch of
different Ruby template engines in an attempt
to make their usage as generic possible. is is
useful for web frameworks, static site
generators, and other systems that support
multiple template engines but don't want to
code for each of them individually.
Sunday, December 18, 11
11. Common Features
Custom template evaluation scopes / bindings.
Sunday, December 18, 11
12. Common Features
Custom template evaluation scopes / bindings.
Ability to pass locals to template evaluation.
Sunday, December 18, 11
13. Common Features
Custom template evaluation scopes / bindings.
Ability to pass locals to template evaluation.
Support for passing a block to template eval for "yield".
Sunday, December 18, 11
14. Common Features
Custom template evaluation scopes / bindings.
Ability to pass locals to template evaluation.
Support for passing a block to template eval for "yield".
Backtraces with correct filenames and line numbers.
Sunday, December 18, 11
15. Common Features
Custom template evaluation scopes / bindings.
Ability to pass locals to template evaluation.
Support for passing a block to template eval for "yield".
Backtraces with correct filenames and line numbers.
Template file caching and reloading.
Sunday, December 18, 11
16. Common Features
Custom template evaluation scopes / bindings.
Ability to pass locals to template evaluation.
Support for passing a block to template eval for "yield".
Backtraces with correct filenames and line numbers.
Template file caching and reloading.
Fast, method-based template source compilation.
Sunday, December 18, 11
22. Sprockets
Rack-based asset packaging for compiling
and serving web assets. It features
declarative dependency management for
JavaScript and CSS assets, as well as a
powerful preprocessor pipeline that allows
you to write assets in languages like
CoffeeScript, Sass, SCSS and LESS.
Sunday, December 18, 11
23. Rack Application
# In config.ru
require 'sprockets'
map '/assets' do
environment = Sprockets::Environment.new
environment.append_path 'app/assets/javascripts'
environment.append_path 'app/assets/stylesheets'
run environment
end
map '/' do
run YourRackApp
end
Sunday, December 18, 11
42. Incomplete
* Advanced Usage
- Where is sprockets.
> Rails.application.assets (helpers can use asset_environment)
- Finding Assets.
#find_asset method (aliased as [])
Notes
Rails.application.assets['shared/modal'] # => Sprockets::BundledAsset
Call to_s on the resulting asset to access its contents, length to get its length in bytes, mtime to
query its last-modified time, and pathname to get its full path on the filesystem.
- Asset Helpers. - image, asset-data-uri, etc.
Move all images to app/assets!!!
Rails.application.assets['site/hmlogo.png']
# => #<Sprockets::StaticAsset:0x3fda99465d08 pathname="/Users/kencollins/Repositories/
homemarks_app/app/assets/images/site/hmlogo.png", mtime=2011-11-16 19:31:44 -0500,
digest="eed9e6f3fd9fa546ccd7ce49edd99f49">
- Custom SASS
- Preprocessors.
- Assets in other assets.
- Precompiling. Fingerprints. When they are used.
- JavaScript Templating with EJS and Eco (read sprockets page)
- JST (define)
- EJS or Eco
- CSS Compressors (:uglifier default, but use :yui for both css/js)
group :assets do
# ...
gem 'yui-compressor', :require => 'yui/compressor'
end
- Your config/application.rb
if defined?(Bundler)
# If you precompile assets before deploying to production, use this line
Bundler.require *Rails.groups(:assets => %w(development test))
# If you want your assets lazily compiled in production, use this line
# Bundler.require(:default, :assets, Rails.env)
end
* CSS Frameworks.
- Less
- Stylus
- Sass
- http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#each-directive
- http://github.com/kuroir/SCSS.tmbundle
- Compass
- mate "$(bundle show compass)/frameworks/compass/stylesheets"
Sunday, December 18, 11
43. Thanks!
Ken Collins
metaskills.net
Sunday, December 18, 11