eric1234 · April 9, 2011 01:12 · TrevorBurnham · Apr 9, 2011 · eric1234 · Apr 9, 2011
diff --git a/0_instructions.txt b/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.
diff --git a/1_Gemfile.rb b/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'
diff --git a/2_asset_server.rb b/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
diff --git a/3_routes.rb b/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
diff --git a/4_application.js.coffee b/4_application.js.coffee
 # Put this in your public/javascripts directory and call /javascripts/application.js in your browser
 alert 'hello world'
diff --git a/5_application.css.scss b/5_application.css.scss
 // Put this in your public/stylesheets directory and call /stylesheets/application.css in your browser
 body {margin: 2px + 5px}
diff --git a/6_conclusion.txt b/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).
	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.
	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'
	if Rails.env.production?
	self.js_compressor = YUI::JavaScriptCompressor.new :munge => true, :optimize => true
	self.css_compressor = YUI::CssCompressor.new
	end
	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).