Padrino and the Asset Pipeline

I’ve been messing with Padrino a bit over the past couple of weeks. There are several smallish apps that I’ve thought that Rails was a little bit of overkill for. However, what I didn’t realize that I was missing was the Asset Pipeline. It’s terribly useful, especially if you tend to mix technologies together in the same app. Once you get into the habit of using it, it gets hard to go without.

I decided to see if I could implement Sprockets directly into Padrino. It turned out to be fairly easy to do, especially since there was already a padrino-sprockets gem out there. Once I figured out the proper way to put everything together, it worked perfectly.

Here is a very quick walkthrough of how to set it up with a brand new Padrino app. Let’s create a basic Padrino application. I’ve basically picked my usual defaults, but it doesn’t matter too much which you use. The bonus is that any of the rendering and templates gems will be available for Sprockets already.

padrino g project something -t cucumber -s jquery -e slim -c compass -e slim
cd something

padrino g project something -t cucumber -s jquery -e slim -c compass -e slim

cd something

Add the following to your Gemfile. This will add the padrino-sprockets gem as well as the handlers for Coffeescript. That part’s optional, but given the Coffeescript love in Rails 3.1 and above, you’ll probably want it.

# Use Sprockets
gem 'padrino-sprockets', :require =&gt; 'padrino/sprockets'

# Use Coffeescript
gem 'coffee-script'
# rack-coffee shouldn't be needed
# gem 'rack-coffee', :require =&gt; 'rack/coffee'

# Use Sprockets

gem 'padrino-sprockets', :require => 'padrino/sprockets'

# Use Coffeescript

gem 'coffee-script'

# rack-coffee shouldn't be needed

# gem 'rack-coffee', :require => 'rack/coffee'

Run bundler and make sure all the gems are installed.

bundle install

1 2	bundle install

Now let’s move all of the stuff in public to app/assets instead. The default stylesheets and javascripts are fine defaults.

mkdir -p app/assets
mv public/* app/assets/
rm app/assets/favicon.ico

mkdir -p app/assets

mv public/* app/assets/

rm app/assets/favicon.ico

Replace app/assets/javascripts/application.js with the following. This is basically the default rails application.js file, and just automatically includes all other files in this directory. Putting the jquery and jquery-ujs files isn’t necessary, but putting them explicitly in the file makes sure that they show up before everything else.

// 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 jquery
//= require jquery-ujs
//= require_tree .

// 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 jquery

//= require jquery-ujs

//= require_tree .

And do the same for 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
 *= require_tree .
 */

* 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

*= require_tree .

The last thing we need to do is put the sprockets init code into app/app.rb config block. This just includes sprockets and padrino-sprockets and starts it up.

# Sprockets support
require 'sprockets'
register Padrino::Sprockets
sprockets

# Sprockets support

require 'sprockets'

sprockets

Now if you startup the server, you should be able to hit http://site/assets/application.js and http://site/assets/application.css, you should get the proper results.

The only issue I’ve found is that there is no easy way to override the directories for where stylesheets and javascripts are stored. This basically makes stylesheet_link_tag and javascript_include_tag useless. Instead, you’ll have to hardcode the following into the head section of your application layout.

&lt;script src="/assets/application.js" type="text/javascript"&gt;&lt;/script&gt;

1 2	<script src="/assets/application.js" type="text/javascript"></script>

Ted Kulp

Ted Kulp is a professional developer, author and technologist with over 15 years of experience from the suburbs of Philadelphia. In 2004, he created the popular content management system, CMS Made Simple and continued to run the project for over 8 years. These days, he makes his living from writing Javascript full-time, writing books, and hacking on open source.

More Posts - Twitter - Facebook - LinkedIn - GitHub

Notice: mc4wp_form is deprecated since version MailChimp for WordPress v3.0! Use mc4wp_show_form instead. in /var/www/html/wp-includes/functions.php on line 3853