Jekyll + Sprockets = Good Times

During the course of my day job, I once in a while get spoiled by some pretty great technologies. At the shop, we use Ruby on Rails along with its pretty great asset pipeline.

On the Javascript side of things, we switched over to CoffeeScript about a year and a half ago. I was reluctant at first, unconvinced it was necessary, but I can honestly say that I’ve grown quite fond of it, and really don’t like writing pure Javascript any more.

On my own projects (ie. primarily all of the things I do for my wife’s business) Ruby on Rails is a bit heavy for the available resources are less than what something like that requires. So instead, I’ve gone with a simple Sinatra app server and a Backbone-based Javascript front-end.

For even the simplest Backbone app, you’ll probably want to split up your files for development, but deploy a single, compressed, versioned bundle. Enter Sprockets by Sam Stephenson ( ). Sprockets is does three really important things:

  1. First, it gives you versioned files using a digest based on each file. So let’s say you have an image called background.jpg. When you run that through Sprockets, it will give output background-764efa883dda1e11db47671c4a3bbd9e.jpg. If you make a change to the image and run it through again, you’ll get background-4da1c6449a2a34a338e56d6718838016.jpg. This eliminates the need of ever having to shift-reload or tell someone else to clear a browser cache or shift-reload.

  2. Second, it lets you process files using a chain of processors. So let’s say you have a file called styles.css.scss.erb. Sprockets will first run this through the ERB template engine. It will give you a processed Sass file which will ultimately be compiled down to styles.css.

  3. Finally, you can group a bunch of individual files into a single, optionally compressed/obfuscated bundle. You create a manifest file which outlines which files or tree of files to include, and it gives you a single bundle, reducing the number of HTTP requests needed by your page.

Sprockets has other features, too, but these three are why I really like it.

Sprockets is what powers the Rails Asset Pipeline, but it can be (and is) used elsewhere, too. For Jekyll-based sites, I’m quite fond of the jekyll-assets plug-in. It has great documentation, and is straight-forward to set up.

sprockets