Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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.
It's based on eric1234 gist https://gist.github.com/911003. ijust made it 3.1 compliant in terms of convention
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'
# Sprockets needs to build JS file. On mac it uses apple java compiler, on production server (linux for example) you need to
# install this gem
group :production do
gem "therubyracer"
end
# better than subclassing Sprockets::Environment according to Josh
Assets = Sprockets::Environment.new(Rails.root) do |env|
assets = ["javascripts", "stylesheets", "images", "fonts"]
paths = ["app/assets/", "lib/assets/", "vendor/assets/" ].map{|path| assets.map{|folder| "#{path}#{folder}" } }.flatten
paths.each{ |path| env.append_path path }
if Rails.env.staging? || Rails.env.production?
env.js_compressor = YUI::JavaScriptCompressor.new :munge => true, :optimize => true
env.css_compressor = YUI::CssCompressor.new
end
end
# Mount the rack end-point for JavaScript and CSS.
MyApp::Application.routes.draw do
# Add this line
mount Assets => '/assets'
end
# Put this in your app/assets/javascripts/application.js directory and call /assets/application.js in your browser
# You need to have jquery and jquery_ujs files (jquery_ujs is sometimes named rails.js)
#
# In your layout just add
#
# <%= javascript_include_tag "/assets/application" %>
#
# In Rails 3.1 you could even do
#
# <%= javascript_include_tag "application" %>
#
//= require jquery
//= require jquery_ujs
//= require_tree .
# Put this in your app/assets/javascripts directory, it will be included when you call /assets/application.js in your browser
alert 'hello world'
// Put this in your app/assets/stylesheets directory and call /assets/application.css in your browser
// In your layout just add
//
// <%= stylesheet_link_tag "/assets/application" %>
//
// In Rails 3.1 you could even do
//
// <%= stylesheet_link_tag "application" %>
//
/*
*= require_tree .
*/
// Put this in your app/assets/stylesheets directory and call /assets/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).
@niuage

This comment has been minimized.

Copy link
Owner Author

commented Jul 28, 2011

Ok, all this is great, I can have my assets organized in app/assets, lib/assets, vendor/assets, and serve them all via /assets.

But I dont want to hit the Rails app for static assets, I want my server to serve them. That's why there is rake assets:precompile in rails 3.1. I managed to make a rake task that precompile the assets in /public/assets/. But for this to work, I would need rails 3.1 asset_path, so that the images for example are referenced correctly in the compiled .css files (with the md5 in their filename).

So basically, I want:
background-image: url(<%= asset_path("discussion-icons.png") %>);
in my style.css.scss.erb file, for instance.

Does anyone has ideas on how to do this? Thanks

@sickill

This comment has been minimized.

Copy link

commented May 14, 2012

@niuage have figured out how to use image path helpers?

@niuage

This comment has been minimized.

Copy link
Owner Author

commented May 14, 2012

Sorry, I upgraded to rails 3.1 a long time ago and I had not fixed the issue before that.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.