在 Rails 3.1 Asset Pipeline 中放置 Galleria（jQuery 图像库框架）的位置？

Question

对于在 Rails 3.1 的新 Asset Pipeline 中放置像 Galleria 这样的 jQuery 框架，我有点困惑？

我知道，从技术上讲，应该进入/vendors/assets/javascripts 但是，据我了解，带有 jQ​​uery 和主题的 Galleria 文件夹希望位于根目录 (/galleria)现场网站，以便正常工作。

另外，当我们这样做时，将以下脚本放在哪里，以便它只出现在带有画廊的页面上？

<script>
    $('#gallery').galleria({
        width:500,
        height:500
    });
</script>

编辑：很惊讶没有回应！？！也许Galleria不那么受欢迎？这些是我要加载的文件。尽管我可以轻松移动它们，但它们像这样捆绑在一起：

vendor/
  assets/
    javascripts/
      galleria-1.2.5.js
      galleria-1.2.5.min.js
    galleria/
      themes/
        classic/
          classic-loader.gif
          classic-map.png
          galleria.classic.css
          galleria.classic.js
          galleria.classic.min.js

我认为 Sprockets require_tree . 会加载 app/assets、lib/assets 和 vendor/assets 中的所有内容？！？

Answer 1

我也偶然发现了这个问题。划分现有库以使其适合当前的 javascripts/样式表结构有点麻烦。因此，您可以在 application.rb 文件中添加额外路径以从中加载资产，如下所示：

    # Enable the asset pipeline
    config.assets.enabled = true
    config.assets.paths << "#{Rails.root}/app/assets/libs"

在 app/assets 下创建一个“libs”文件夹，将 Galleria 库复制到该文件夹​​并将其添加到您的应用程序布局文件中：

    <%= javascript_include_tag 'galleria/galleria-1.2.4.min.js' %>
    <%= javascript_include_tag 'galleria/themes/classic/galleria.classic.min.js' %>

您也可以通过要求 js 文件来捆绑 Galleria 代码，但这取决于您。

Answer 2

我遇到了同样的问题，花了一段时间才开始工作。最初，它在开发中可以正常工作，但当我们转向生产时，Galleria 默默地失败了，因为资产文件名现在有“指纹”。这似乎也是 jQuery UI 主题和许多其他此类脚本的问题。

当然，您可以回到旧的做事方式，将所有内容都“公开”，但我们希望能够自动合并所有 css/js 文件，并以 rails 方式做事。

这就是我的工作方式：

vendor/
  assets/
    images/
      classic-loader.gif
      classic-map.gif
    javascripts/
      galleria-1.2.5.js
      galleria.classic.js
    stylesheets
      galleria.classic.css.scss

将您的 galleria.classic.css 文件重命名为 galleria.classic.css.scss。然后替换图像引用，像这样（我有两个）：

url("classic-loader.gif") 变为 image-url("classic-loader.gif")

更新：看起来您不需要在 Rails 3.1.1 中执行此操作。只需将文件重命名为 .css.scss，rails 就会自动为您预处理 url() 调用。

在你的 app/assets/javascripts/application.js 文件中，确保你有这些行

//= require galleria-1.2.5
//= require galleria.classic
//= require_tree .

在你的app/assets/stylesheets/application.css 文件中，确保你有这些行

*= require galleria.classic
*= require_tree .

最后，Galleria 似乎内置了一些花哨的非标准 CSS 加载。这就是阻止 Galleria 在我们的生产网站上加载的原因。由于我们已经包含了样式表，我们希望禁用此行为。只需打开 galleria.classic.js（或您的 Galleria 主题 javascript 文件），然后替换以下行：

css: 'galleria.classic.css',

与：

css: false,

这将告诉 Galleria 不要尝试加载样式表。

还有一件事 - 在尝试编译这些资产时，我遇到了显然是 bug in Rails 3.1.0 的东西。当我运行rake assets:precompile 时，出现如下错误：

$ bundle exec rake assets:precompile
rake aborted!
classic-loader.gif isn't precompiled
  (in /vendor/assets/stylesheets/galleria.classic.css.scss)

长话短说，你需要在config/environments/production.rb中设置这一行：

config.assets.compile = true

一旦 3.1.1 发布，就不需要这样做了。

Answer 3

我喜欢 Arjen 的建议，但我认为 vendor/assets/libs 更合适。这是我的设置：

在 config/application.rb 中

config.assets.enabled = true
config.assets.paths << "#{Rails.root}/vendor/assets/libs"

在 app/assets/javascripts/application.js 中

//= require galleria/galleria-1.2.6.min.js

初始化：

Galleria.loadTheme('assets/galleria/themes/classic/galleria.classic.min.js');
$('#gallery').galleria();

注意传递给loadTheme() 的路径如何以“资产”开头。

我喜欢这种设置，因为它使galleria 文件夹保持不变。此外，它将galleria-1.2.6.min.js 连接到我的主 js 文件（少一个 http 请求）。