Skip to content

Instantly share code, notes, and snippets.

@addamh
Forked from eric1234/0_instructions.txt
Created April 15, 2011 17:28
Show Gist options
  • Save addamh/922084 to your computer and use it in GitHub Desktop.
Save addamh/922084 to your computer and use it in GitHub Desktop.
Some brief instructions on how to use Sprocket 2 in Rails to get CoffeeScript
powered JS and SASS powered CSS with YUI compression all via the magic of rack.
Ignore the number prefixes on each file. This is just to ensure proper order in the Gist.
gem 'coffee-script'
gem 'yui-compressor', :require => 'yui/compressor'
gem 'sass'
gem 'json' # sprocket dependency for Ruby 1.8 only
gem 'sprockets', :git => 'git://github.com/sstephenson/sprockets.git'
# Config a Sprockets::Environment to mount as a Rack end-point. I like to use a subclass
# as it allows the config to be easily reusable. Since I use the same instance for
# all mount points I make it a singleton class. I just add this as an initializer to my
# project since it is really just configuration.
class AssetServer < Sprockets::Environment
include Singleton
def initialize
super Rails.public_path
paths << 'javascripts' << 'stylesheets'
self.js_compressor = YUI::JavaScriptCompressor.new :munge => true, :optimize => true
self.css_compressor = YUI::CssCompressor.new
end
end
# Mount the rack end-point for JavaScript and CSS.
MyApp::Application.routes.draw do
mount AssetServer.instance => 'javascripts'
mount AssetServer.instance => 'stylesheets'
end
# Put this in your public/javascripts directory and call /javascripts/application.js in your browser
alert 'hello world'
// Put this in your public/stylesheets directory and call /stylesheets/application.css in your browser
body {margin: 2px + 5px}
Sprockets 2 has a lot more under the hood but this gets you started.
A few things not covered:
1. Anything supported by Tilt can be used as a template engine
(not just Sass and CoffeeScript).
2. Although Sass has native abilities to include other files, Sprockets 2
gives the ability to all formats through special comments like:
// =require "foo"
It's special commands can be fairly powerful (like requiring an entire
directory or tree). NOTE: Use the comment character relevant for the
language. So coffescript should be:
# =require 'foo.js'
Then you can create 'foo.js.coffee' and when served it will be as one
file.
3. Sprockets 2 has the ability to pre-compile the assets for maximum speed.
Also useful when the deployment environment doesn't support a template
language (like CoffeeScript).
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment