Rails 3.1 和 jquery-ui 资产

Posted 2023-02-15

【中文标题】Rails 3.1 和 jquery-ui 资产

【英文标题】：Rails 3.1 and jquery-ui assets

【发布时间】：2011-09-02 07:01:20

【问题描述】：

这是在另一个问题中提出的，但在 3.1rc1 中似乎没有一个解决方案适合我。

我正在尝试使用 rails 3.1 中的新资产 - 我有文件：

./vendor/assets/stylesheets/jquery-ui-1.8.13.custom.css
./vendor/assets/javascripts/jquery-ui-1.8.13.custom.min.js

然后我补充说：

//= require jquery-ui to app/assets/javascripts/application.js
*= require jquery-ui to app/assets/stylesheets/application.css

jquery-ui javascript 文件加载正常，但 css 文件显示：

Sprockets::FileNotFound (couldn't find file 'jquery-ui'
     (in /home/xanview2/xancar/app/assets/stylesheets/application.css):6):

有什么想法吗？

【参考方案1】：

工作设置示例：

    $ cat app/assets/javascripts/application.js

    //= require jquery
    //= require jquery-ui


    $ cat app/assets/stylesheets/application.css

    /*
     *= require vendor
     *
     */


    $ cat vendor/assets/stylesheets/vendor.css

    /*
     *= require_tree ./jquery_ui 
     *
     */

    vendor/assets/ $ tree
     stylesheets
         vendor.css
             jquery_ui
                      jquery-ui-1.8.13.custom.css
                      ...
     images
        jquery_ui
            ui-bg_flat_0_aaaaaa_40x100.png
            ...

最后运行这个命令：

    vendor/assets/images $ ln -s jquery_ui/ images

享受你的 jQuery UI

【讨论】：

只需添加 //= 要求 jquery-ui 为我解决了它（因为我在 Gemfile 中有“gem 'jquery-rails'”），但如果有人定制了 jquery-ui（至少我是这么认为的）。

非常适合我，你运行 $ ln -s 命令了吗？如果您仍有问题，请在新帖子中描述，也许我或其他人会帮助您。

如果这样做，则需要编辑 css 并更改图像 url，以便通过管道处理它们。

请注意：如果使用 config.assets.debug 选项，则不需要符号链接，因为 jquery ui 样式表中的 url 将解析 OK

在 Windows 上，因为无法使用符号链接，推荐的方法是什么？

【参考方案2】：

这是一篇关于 Rails 3.1 的资产管道和 jQuery UI 的精彩文章：JQuery-UI css and images, and Rails Asset Pipeline

【参考方案3】：

jquery-ui-rails gem（请参阅announcement）可能会让您更幸运，它将 jQuery UI JavaScript、样式表和图像打包为您的资产。

【参考方案4】：

这个话题经常出现，现在已经过了很长一段时间，情况可能会有所不同。

在 Rails 3.1.2 中，我发现了一些无需符号链接即可工作的东西。 按照上面的步骤进行操作，但是将主题的图像放在 images/ 文件夹中 jquery-ui-xxx.css 文件旁边。这让我省了很多麻烦。

是的，这意味着图像将驻留在 vendor/assets 中的 stylesheets/ 文件夹中，但它可以工作并且执行速度很快。

【讨论】：

这是对我来说坏掉的部分。而且，无法遵循 Windows 上的“vendor/assets/images $ ln -s jquery_ui/images”指令。谢谢！

谢谢你！这很快解决了我的问题。

【参考方案5】：

您是否尝试过使用rails-asset-jqueryui gem？它提供 jquery-ui 和标准主题（当前为 v1.8.16）并通过资产管道提供它们。以下示例调用 Smoothness 主题。

宝石文件：

....
gem 'rails-asset-jqueryui'
...

app/assets/javascripts/application.js:

...
//= require jqueryui
...

app/assets/stylesheets/application.css：

...
= require smoothness
...

【参考方案6】：

如果您使用的是 jquery-ui-rails gem：

应用程序.css

/*
 *= require jquery.ui.all
 */

应用程序.js

//= require jquery.ui.all

【参考方案7】：

在我看来，通过将这些库资产排除在 assets/javascripts 和 assets/stylesheets 目录之外，可以避免很多混乱，因为 sprockets 等人对应该发生的事情有一些看法。

假设您从 themeroller 下载了一个定制的 jquery-ui zipfile。试试这个：

将 zip 文件解压到资产目录的子目录中，类似于

vendor/assets/jquery-ui-1.8.23.custom

在 application.rb 中添加：

config.assets.paths << Rails.root.join('vendor', 'assets', 'jquery-ui-1.8.23.custom').to_s

在通常的地方添加清单文件：

供应商/资产/javascripts/jquery-ui.js：

//= require_tree ../jquery-ui-1.8.23.custom

供应商/资产/样式表/jquery-ui.css：

*= require_tree ../jquery-ui.1.8.23.custom

在 config/environments/production.rb 中，添加（指清单文件名）：

config.assets.precompile += %w(jquery-ui.js jquery-ui.css)

在视图中：

<%= stylesheet_link_tag 'jquery-ui' %>
<%= javascript_include_tag 'jquery-ui' %>

【讨论】：

我真的很喜欢这种方法，除了 #2 不能很好地扩展。我很想将我所有的供应商都保留在他们自己的结构中，这样升级很容易，而且我不必将 CSS/JS 解析到单独的目录中。我想这里的总体趋势是有人制作了一个 gem（bootstrap，jquery UI）

【参考方案8】：

如果你使用这个：

https://github.com/carlhoerberg/sprockets-urlrewriter

我相信您可以将整个 shebang 转储到一个目录中并要求 css 文件...它会顺利重写相关 url。

您只需安装 gem 并将配置行添加到 application.rb