Using Sprockets 2 in Rails 3.0.x with CoffeeScript & SASS

0_instructions.txt

UPDATE: Please see some of the forks for an updated version of this guide. I
myself have moved onto the Rails 3.1 betas to get the asset pipeline. But if
you want to stay on stable there are other folks who are keeping this guide
relevant despite the changes constantly occurring on Sprockets 2. The comments
on this gist will lead you to the right forks. :)

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.

This stuff will be native in Rails 3.1 and the layout of the files on the
filesystem will be different but this guide will get you working with it
while we wait for all that to finalize.

Ignore the number prefixes on each file. This is just to ensure proper order in the Gist.

1_Gemfile.rb

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'

2_asset_server.rb

# 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'
    if Rails.env.production?
      self.js_compressor = YUI::JavaScriptCompressor.new :munge => true, :optimize => true
      self.css_compressor = YUI::CssCompressor.new
    end
  end

end

3_routes.rb

# Mount the rack end-point for JavaScript and CSS.
MyApp::Application.routes.draw do
  mount AssetServer.instance => 'javascripts'
  mount AssetServer.instance => 'stylesheets'
end

4_application.js.coffee

# Put this in your public/javascripts directory and call /javascripts/application.js in your browser
alert 'hello world'

5_application.css.scss

// Put this in your public/stylesheets directory and call /stylesheets/application.css in your browser
body {margin: 2px + 5px}

6_conclusion.txt

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

A few things:

1. If you do includes in sass or coffeescript, if you modify the included files, the changes won't be picked up until the main file is changed.
2. The cache busting timestamps won't appear.

I had problems getting this to work with sprockets (2.0.0.beta.13) because the trail.paths array was being duplicated before returning, so appending paths to it didn't work. The solution was to use append_path.

I've forked your gist here:

https://gist.github.com/1154048

And done a sample Rails 3 app here:

https://github.com/suranyami/sprocket_sample

@suranyami - Awesome to see you and other people keeping this gist relevant for Rails 3 despite all the changes affecting sprockets 2 that are constantly making this gist obsolete. Thanks for keeping this guide from going obsolete. I keep hoping Rails 3.1 hits soon so people can use the asset pipeline without rigging it themselves (or using beta software).

@eric1234 Glad you like it.

I wish I could start using Rails 3.1 now, too, because the asset pipeline looks sweet.

I've also updated the sprocket_sample to have some detailed examples using a couple of different templates and require statements.

@suranyami, this is gold thanks! The Sprockets example of specifically mounting the Sprocket endpoint and then the Rails App endpoint didn't work for me in integration tests. This solved my issue on getting the JS loaded properly with capybara-webkit. Thanks so much!

Glad to hear, @bradrobertson! Happy to help.

Any chance anyone has the digest option of sprockets working with this setup? I haven't really had a chance to dig into it too much, but I'd love for an MD5 to be appended to my files in production.

Does this is compatible with rails 3.0.11

@MohitSharma - Things have changed a lot in Sprockets 2 since I wrote this guide. You will likely need to change some things. Also some forks of this guide were made to accomidate changes in Sprockets 2. Unsure if those are still maintained or if their editor has moved onto Rails 3.1+. It should be possible to use Sprockets 2 in a Rails 3.0.11 app (since it is just rack based). You may just have to dig a bit.

Thanks @eric1234