Skip to content


Switch branches/tags

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time

Closure Sprockets

Sprockets preprocessor for Google's Closure tools + Closure-templates (soy) compiler + Closure stylesheets (gss) compiler.

Integrating with Rails 3

If you want to use closure as your Javascript library in Rails 3, add this gem to your Gemfile:

gem 'closure-sprockets'

The gem ships with a Railtie which will automatically register a Closure preprocessor. From here, three more steps:

  • Download the latest version of closure library from Google and put it in vendor/assets or another appropriate folder
  • Create require_file.js that will be your closure start point and include it with new directive require_closure at your application.js:
    //= require_closure require_file
  • Write some closure code!


// in your javascript `require_file.js` file or any depended file

function sayHello() {
  newHeader = goog.dom.createDom('h1', {}, 'Hello world!');
  goog.dom.appendChild(document.body, newHeader);

window.onload = sayHello;

You can also add a template in your assets folder and require it by standard require directive, and it will be automatically compiled to Javascript for you! Ex:

/** */

{namespace examples.simple}

 * Says hello to the world.
{template .helloSoy}
  Hello from Soy!
//= require examples/simple

var soy = goog.dom.createDom('h1', {'style': 'background-color:#EEE'}, examples.simple.helloSoy());
goog.dom.appendChild(document.body, soy);

That's it! Point your browser at your page and you should have a hello world greeting from Google Closure, preprocessed by the Rails 3 Asset Pipeline and without any external Python dependencies or dynamic Javascript loading.


You can use also closure stylesheets in .gss files

/** style.gss **/

@def BG_COLOR              rgb(235, 239, 249);

@def DIALOG_BORDER_COLOR   rgb(107, 144, 218);

body {
  background-color: BG_COLOR;

.dialog {
  background-color: DIALOG_BG_COLOR;
  border: 1px solid DIALOG_BORDER_COLOR;

GSS files will be compiled automatically to CSS:

body {
  background-color: #ebeff9;
.dialog {
  background-color: #ebeff9;
  border: 1px solid #6b90da;

Using Closure Compressor for Minification

Closure also provides its own Javascript compressor. If you wish to use it, pull in the closure-compiler gem:

# in your Gemfile
gem 'closure-compiler'
# in your environment configuration
config.assets.js_compressor =

If you are not using the closure compiler, then you may want to disable the dynamic deps.js loading. To do so, add the following snippet in application.html.erb above the javascript_include tag:

<script type="text/javascript">
  var CLOSURE_NO_DEPS = true;


(MIT License) - Copyright © 2011 Ilya Grigorik