How to link to files in a jQuery plugin in Rails 3.1 using Sprockets architecture?

Question

A good example is the Plupload plugin. Here's the plugin list 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 moving these files to different stylesheets, javascripts and image directories, it is better to leave them in place and refer to them using the Sprockets directive. How is this done, especially with respect to image files and other assets such as .swf and .xap?

Answer 1

Maybe I'm wrong, but as mentioned in the Rails documentation:

This does not mean that assets may (or should) no longer be placed in the public; they can still be and will be used as static application or web server files. You would only use the application / assets, if you want your files must be pre-processed before they are submitted. http://ryanbigg.com/guides/asset_pipeline.html

As you do not need to pre-process these files, can your good old shared directory be your answer?

Answer 2

You can use the Sprockets provide directive.

For example, I use Plupload:

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

The corresponding vendor catalog is organized as follows:

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

Then I use <%= javascript_include_tag 'plupload' %> when I want to use Plupload, and use the asset_path 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 this helps.