is a freelance web developer focused on making rich web applications with Ruby on Rails. He currently lives and works in Queens, NY.
You can follow starr on Twitter, or email him at starr /at/ chatspring.com.
Starr is a contributing editor with Rails Magazine where he maintains a column on client side development topics.
But now, thanks to Sprockets, we can have the best of both options.
Three Delicious Flavors
There are three ways that you can use Sprockets.
Use the sprocketize utility from the command line, for easy shell scripting.
Use the Sprockets-rails plugin, which makes integration with rails a snap.
We're going to focus on using the sprockets-rails plugin in this article. For more information, check out http://getsprockets.com
The Sprockets Syntax
//= require <file> Include a file located in one of the include paths in sprockets.yml
//= require "file" Include a file based in the current directory. You can use relative paths.
//= asset asset/ Specify a path for all assets to be moved to /public
//= asset somefile.png Specify a single file to be moved.
To install Sprockets and sprockets-rails, you'll need to make sure that you have git installed, and that you have an existing rails project to work with.
1. Install the Sprockets gem
Sprockets is distributed as a gem, so installation is easy:
$ gem install --remote sprockets
2. Install the sprockets-rails plugin
Since sprockets-rails is a rails plugin, installing it is easy as well:
$ cd your_project_directory
$ script/plugin install git://github.com/sstephenson/sprockets-rails.git
3. Configure Routes
Before we can use the controller, however, we need to add a route. Once this is done, the routes.rb file should look something like this:
ActionController::Routing::Routes.draw do |map|
# Set up routes for the sprockets-rails plugin
When it's done, our layout looks like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Rails Application With Built-In Helpdesk</title>
<link rel="stylesheet" href="/stylesheets/main.css" type="text/css" media="screen, projection" />
<%= sprockets_include_tag %>
<%= yield :head %>
5. Test it out
If you'd like to see how you can modify the sprockets-rails plugin to achieve this, you can find an example at http://github.com/starrhorne/sprockets-rails/tree/master
Creating a Sprockets Plugin
Imagine for a moment, that you're Sergey Brin, co-founder of Google. The market's in a slump. Your stock is down. You've decided that the only sure fire-way to bring it up is to reimplement Google in Ruby on Rails. (Hey – it could work!)
You need to implement an autocomplete feature. And you need it to be able to easily share it between all of the Google products. In this case, a Sprockets plugin makes a lot of sense.
The anatomy of a Sprockets plugin
Sprockets plugins are pretty simple. In its simplest form, a sprockets plugin consists of a single file in vendor/sprockets/plugin_name/src
The first thing we need to do is create a directory:
$mkdir -p vendor/sprockets/autocomplete/src
And now, I'll just move my autocomplete scripts there:
$mv <some directory>/autocomplete.js vendor/sprockets/autocomplete/src
$mv <some directory>/menu.js vendor/sprockets/autocomplete/src
Using the Sprockets plugin in your rails application
//= require <autocomplete>
Declaring the plugin's dependencies
Our imaginary autocomplete.js file depends on both prototype.js and menu.js. To declare these dependencies, we'll add a few lines to the top of autocomplete.js
//= require <prototype>
//= require “menu”
Now, whenever the autocomplete.js file is included by Sprockets, it will automatically include the other files as well.
Note that the <> syntax causes Sprockets to search all directories in the include path, while the “” syntax searches the source file's local directory.
Adding assets to the plugin
Now it's time to set up the assets for the auto-complete plugin. These consist of two files: autocomplete.css and autocomplete_corners.png.
We'll create a directory to hold these. Sprockets doesn't require you to use any particular directory structure for assets, so we'll keep it simple:
$ mkdir vendor/sprockets/autocomplete/resources
$ mv <some directory>/autocomplete.css vendor/sprockets/autocomplete/resources
$ mv <some directory>/autocomplete_corners.png vendor/sprockets/autocomplete/resources
We'll add another line to autocomplete.js, to let Sprockets know about the resources
//= provide "../resources"
Now we can run rake sprockets:install_assets to copy all of the files in vendor/sprockets/autocomplete/resources to public/home
To learn more...
I hope that this article has piqued your curiosity about Sprockets. Indeed, we've only scratched the surface. If you'd like to learn more, stop by the project home page at http://getsprockets.com