How to reference files in a JQuery plugin in Rails 3.1 using the Sprockets architecture?

Question

The Plupload plugin is a good example. Here's the listing of the plugin added to the vendor directory:

./plupload/jquery.plupload.queue
./plupload/jquery.plupload.queue/css
./plupload/jquery.plupload.queue/css/jquery.plupload.queue.css
./plupload/jquery.plupload.queue/img
./plupload/jquery.plupload.queue/img/backgrounds.gif
./plupload/jquery.plupload.queue/img/buttons-disabled.png
./plupload/jquery.plupload.queue/img/buttons.png
./plupload/jquery.plupload.queue/img/delete.gif
./plupload/jquery.plupload.queue/img/done.gif
./plupload/jquery.plupload.queue/img/error.gif
./plupload/jquery.plupload.queue/img/throbber.gif
./plupload/jquery.plupload.queue/img/transp50.png
./plupload/jquery.plupload.queue/jquery.plupload.queue.js
./plupload/jquery.ui.plupload
./plupload/jquery.ui.plupload/css
./plupload/jquery.ui.plupload/css/jquery.ui.plupload.css
./plupload/jquery.ui.plupload/img
./plupload/jquery.ui.plupload/img/plupload-bw.png
./plupload/jquery.ui.plupload/img/plupload.png
./plupload/jquery.ui.plupload/jquery.ui.plupload.js
./plupload/plupload.browserplus.js
./plupload/plupload.flash.js
./plupload/plupload.flash.swf
./plupload/plupload.full.js
./plupload/plupload.gears.js
./plupload/plupload.html4.js
./plupload/plupload.html5.js
./plupload/plupload.js
./plupload/plupload.silverlight.js
./plupload/plupload.silverlight.xap

Instead of relocating these files into various stylesheets, javascripts, and images directories, it's better to leave them in place and reference them with the Sprockets require directive. How is this done, particularly with respect to image files and other assets like .swf and .xap?

Answer 1

You can use the Sprockets provide directive.

For example, this is how I am using Plupload:

# app/assets/javascripts/plupload.js
//= require plupload/plupload
//= require plupload/plupload.flash
//= require plupload/plupload.silverlight
//= provide plupload/dependencies

The corresponding vendor directory is organised like this:

vendor
├── assets
│   ├── javascripts
│   │   └── plupload
│   │       ├── dependencies
│   │       │   ├── plupload.flash.swf
│   │       │   └── plupload.silverlight.xap
│   │       ├── plupload.flash.js
│   │       ├── plupload.js
│   │       └── plupload.silverlight.js
│   └── stylesheets
└── plugins

I then use <%= javascript_include_tag 'plupload' %> when I want to use Plupload, and use the asset_path helper to populate the Plupload configuration:

<%= javascript_include_tag 'plupload' %>

<script type="text/javascript">
$(function() {
    var uploader = new plupload.Uploader({
        runtimes : 'flash,silverlight',
        multipart : true,
        multipart_params : {
            'authenticity_token' : '<%= form_authenticity_token %>'
        },
        flash_swf_url : 
            '<%= asset_path "plupload/dependencies/plupload.flash.swf" %>',
        silverlight_xap_url :
            '<%= asset_path "plupload/dependencies/plupload.silverlight.xap" %>',
        url : '<%= url_for [@item, :photos] %>',
        // ...
    });

Hope that helps.

Answer 2

I may be wrong, but, as mentioned in Rails documentation :

This is not to say that assets can (or should) no longer be placed in public; they still can be and will be served as static files by the application or web server. You would only use app/assets if you wish your files to undergo some pre-processing before they are served. http://ryanbigg.com/guides/asset_pipeline.html

As you don't want any pre-processing on these files, could the good old public folder be your answer?