Rails 3.1, jQuery Mobile and the Asset Pipeline

I haven’t really used any version of Rails before 3.1 – so I am not intimately familiar with the ‘way it used to be’. From what I understand, all of the js, css and images associated with a library like jQuery Mobile would have been included under /public. The problem with this is that /public then become stuffed full of a mixed bag of files with little organisation.

So enter Rails 3.1 and the asset pipeline and my adventures with jQuery Mobile. Following the guide here (http://ryanbigg.com/guides/asset_pipeline.html) I placed the jQuery css and js files under /vendor/assets/stylesheets and /vendor/assets/javascripts respectively. This worked well. These files could be loaded directly via include tags such as: <%= javascript_include_tag “jquerymobile.js” %>

Using this approach however the images used by jQuery Mobile had to be placed under /public/assets/images in order to be found. This worked – but made no sense to me… to have the js and css under /vendor and the images under /public. So I went searching for a better way.

The first clue was when I found this site (http://getsprockets.org/installation_and_usage). This actually shouldn’t have been that remarkable – except that it didn’t seem to be referenced from any of the Rails docs on the Asset Pipeline that I could find. The ‘provide’ directive is the one that is useful here.

So I returned to look at jQuery Mobile and discovered that all of the images or loaded by the css. So alongside my jquery-mobile.css in /vendor/assets/stylesheets I placed a ‘vendor.css’ that was a manifest file that included:

 *= require “jquery-mobile”

 *= provide “..”

(Forgive the lack of proper syntax highlighting…. that is a job for another day 😉

The images for jquery mobile were placed in /vendor/assets/images as you would expect. And I this point I was sure I had it licked. But I consistently got 404’s for any attempt to access the images. I tried all sorts of variations of the path for the provide directive with no success. Then finally I came across this post (http://stackoverflow.com/questions/6213218/rails-3-1-and-image-assets) which mentioned that the ‘/images’ portion of the url was being stripped. However ‘/images’ was coded throughout the jQuery Mobile css. So I added another ‘images’ subdirectory (/vendor/assets/images/images) and put the jQuery Mobile images there and viola – success.

The repeated images directory is a bit ugly – but much less ugly than having js and css in /vendor and the images in /public – so that counts as a win.

Given that I am a total n00b in this – I am sure that there is “a better way” – but at least this is working.