ruby-on-rails - 如何使用 sprockets 架构在 Rails 3.1 中引用 JQuery 插件中的文件？

Question

Plupload插件就是一个很好的例子。这是添加到 vendor 的插件列表目录:

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

与其将这些文件重新定位到各种样式表、javascripts 和图像目录中，不如将它们留在原处并使用 Sprockets require 指令引用它们。这是如何完成的，特别是对于图像文件和其他 Assets ，如 .swf 和 .xap？

Answer 1

您可以使用 Sprockets provide directive .

例如，这就是我使用 Plupload 的方式:

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

对应的vendor目录是这样组织的:

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

然后我使用 <%= javascript_include_tag 'plupload' %>当我想使用 Plupload 时，请使用 asset_path填充 Plupload 配置的助手:

<%= 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] %>',
        // ...
    });

希望有帮助。