GhettoCo.de

A blog about code and sh*t

Multiple Asset Pipelines

I’m working on a project that needs both mobile and web interfaces. We’re building the mobile interface with Sencha Touch and the web version with good ol’ jQuery.

I setup the app for mobile similar to Ryan Bates’ Mobile Devices RailsCast. This allows us to serve different views to the client depending on whether or not the device is a mobile device.

But what about the javascript and coffescript? We’re going to need different behaviour on the client side depending on which view is rendered and I want it all to take advantage of the Asset Pipeline. So I decided to try and make a parallel asset pipeline so I can do something like this:

“app/views/layouts/application.mobile.erb”
1
2
3
4
5
6

<head>
  ...
  <%= stylesheet_link_tag    "mobile", :media => "all" %>
  <%= javascript_include_tag "mobile" %>
  ...
</head>

And have Sprockets build the coffescript, javascript, and css the same as this:

“app/views/layouts/application.html.erb”
1
2
3
4

  ...
  <%= stylesheet_link_tag    "application", :media => "all" %>
  <%= javascript_include_tag "application" %>
  ...

I decided to create an asset structure under app/assets/mobile to house the javascripts, stylesheets, and images for the mobile app. Then, I added those directories to the Sprockets search path.

“config/application.rb”
1
2
3

%w[javascripts stylesheets images].each do |dir|
  config.assets.paths << Rails.root.join("app", "assets", "mobile", dir)
end

mobile.js first require’s Sencha Touch and then requires all of the coffeescript and javascript under in the app/assets/mobile/javascripts directory.

“app/assets/javascripts/mobile.js”
1
2

//= require sencha-touch-all-debug
//= require_tree .

Similarly, mobile.css requires all the files under the strylesheets directory structure:

“app/assets/stylesheets/mobile.css”
1
2
3
4

/*
 *= require_self
 *= require_tree .
*/

Now we’re ready to require the mobile.js and mobile.css in our mobile layout and have a clean seperation of the javascript and css between the mobile and web versions of our app.

Comments