Using Sprockets to Manage the Asset Pipeline in Padrino

Written by | 8 minutes read | Tags padrino, ruby, programming | Comments

This article is part of an ongoing series about my exploration of the Padrino web framework. If you want to read more about it please check out padrinobook.com. You sniff around in the sources of the book under GitHub.

Sprockets are a way to manage serving your assets like CSS, and JavaScript compiling all the different files in one summarized file for each type. They make it easy to take advantage to use a preprocessor to write your assets with Sass, Coffesscript, or LESS.

To implement Sprockets in Padrino there the following strategies:

Padrino Sprockets

First we will create a new Padrino app:

$ padrino g project job-vacancy -d activerecord -t rspec -s jquery -e erb -a sqlite

We are using the padrino-sprockets gem. Let’s add it to our Gemfile:

# Gemfile
gem 'padrino-sprockets', :require => ['padrino/sprockets'], :git => 'git://github.com/nightsailer/padrino-sprockets.git'

Next we need to move all our assets from the public folder in the assets folder:

$ cd <path-to-your-padrino-app>
$ mkdir -p app/assets
$ mv public/javascript app/assets
$ mv public/stylesheets app/assets
$ mv public/images app/assets

Now we have to register Padrino-Sprockets in this application:

# app/app.rb
module JobVacancy
  class App < Padrino::Application
    ...
    register Padrino::Sprockets
    sprockets
    ...
  end
end

Next we need to determine the order of the loaded CSS files:

# app/assets/stylesheets/application.css
/*
 * This is a manifest file that'll automatically include all the stylesheets available in this directory
 * and any sub-directories. You're free to add application-wide styles to this file and they'll appear at
 * the top of the compiled file, but it's generally better to create a new file per style scope.
 * require_self: Puts the CSS contained within this file at the precise location (puts this command
 * at the top of the generated css file
 * require_tree . means, that requiring all stylesheets from the current directory.
 *
 *= require_self
 *= require bootstrap
 *= require bootstrap-responsive
 *= require site
*/

First we are loading the bootstrap default CSS, then bootstrap-response, and finally our customized site CSS. The require_self loads the file itself, to define the order that the files are loaded. This is helpful if you want to check the order of the loaded CSS as a comment above your application without ever have to look into the source of it.

Next let’s have a look into our JavaScript files:

# app/assets/javascript/application.js

// This is a manifest file that'll be compiled into including all the files listed below.
// Add new JavaScript/Coffee code in separate files in this directory and they'll automatically
// be included in the compiled file accessible from http://example.com/assets/application.js
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// the compiled file.
//
//= require_tree .

The interesting thing here is the require_tree . option. This option tells Sprockets to include all JavaScript files in the assets folder with no specific order.

Now, we can clean up the include statements in our application template:

# app/views/layouts/application.erb

<!DOCTYPE html>
<html lang="en-US">
<head>
  <title>Job Vacancy - find the best jobs</title>
  <link href="/assets/application.css" rel="stylesheet" />
  <script src="/assets/application.js"></script>
</head>

Enable Compression for CSS and JavaScript

Now we want to enable compression for our CSS and JavaScript files. For CSS compression Padrino Sprockets is using YUI compressor and for JS compression the Uglifier. We need to add these these Gems in our Gemfiles:

# Gemfile
...
gem 'padrino-sprockets', :require => 'padrino/sprockets', :git => 'git://github.com/nightsailer/padrino-sprockets.git'
gem 'uglifier', '2.1.1'
gem 'yui-compressor', '0.9.6'

And finally we need to enable minifying in our production environment:

# app/app.rb
module JobVacancy
  class App < Padrino::Application
    ...
    register Padrino::Sprockets
    sprockets :minify => (Padrino.env == :production)
  end
end