-
-
Save niuage/1112393 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
# 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 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
# Mount the rack end-point for JavaScript and CSS. | |
MyApp::Application.routes.draw do | |
# Add this line | |
mount Assets => '/assets' | |
end |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
# 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 . |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
# Put this in your app/assets/javascripts directory, it will be included when you call /assets/application.js in your browser | |
alert 'hello world' |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// 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 . | |
*/ |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Put this in your app/assets/stylesheets directory and call /assets/application.css in your browser | |
body {margin: 2px + 5px} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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
Sorry, I upgraded to rails 3.1 a long time ago and I had not fixed the issue before that.