Using Sprockets to Manage the Asset Pipeline in Padrino
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.
To implement Sprockets in Padrino there the following strategies:
- rake-pipeline - Define filters that transforms directory trees.
- sinatra-assetpack - Let’s you define you assets transparently in Sinatra.
- padrino-sprockets - Integrate sprockets with Padrino in the Rails way.
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:
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.
The interesting thing here is the
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>
# 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