【问题标题】：How to add external assets file in rails 4 project?如何在 Rails 4 项目中添加外部资产文件？
【发布时间】：2015-10-31 09:50:07
【问题描述】：

我在一个单独的项目中有一个外部 css、javascript 和 Images 文件，并希望包含在我的新 rails 项目中。这是我的文件夹结构：

external-assets/js/ <Files>
external-assets/js/plugin/<Files>
external-assets/css/<Files>
external-assets/css/plugins/<Files>
external-assets/images/<some Folders>/<Files>
external-assets/images/<Files>

所以，我将external-assets/js 文件夹复制到app/assets/javascript，对于css，我将external-assets/css 复制到app/assets/stylesheets。

并在我的html.erb 文件中将<link rel="icon" href="external-assets/css/plugins/bootstrap.min.css"> 替换为<%= stylesheet_link_tag "/plugins/bootstrap.min.css" %>。对于其他 css 文件和 js 文件，我也遵循了同样的方法。当我启动服务器时出现此错误：

Asset filtered out and will not be served: add `Rails.application.config.assets.precompile += %w( style.css )` to `config/initializers/assets.rb` and restart your server

在SO post 上搜索后喜欢：Asset filtered out and will not be served: add `config.assets.precompile 和 Asset filtered out and will not be served。我需要向config.assets.precompile 提及我所有的js 和css 文件。

问题

1) 我真的需要提及所有js、css 和images 文件吗？我知道原因，但我确实有很多资产文件。

2) 如果我把它们放在public 文件夹中呢？这是好方法吗？

3) stylesheet_link_tag 用于 css ，javascript_link_tag 用于 js。图片呢？

【问题讨论】：

标签： css ruby-on-rails ruby ruby-on-rails-4

【解决方案1】：

我真的需要提到所有的 js、css 和图像文件吗？我知道原因，但我确实有很多资产文件。

没有。

Sprockets 具有 require 指令，可将您 "require" 的任何文件连接到您的 application 文件中...

#app/assets/javascripts/application.js
//= require x

你想要什么？可能不会……但它至少让您能够调用一个文件 (application)，同时受益于所有其他文件的内容。

2) 如果我将它们放在公共文件夹中会怎样？这是好方法吗？

没有。

无论如何，预编译资产会将minified 版本放入public/assets。

3) CSS 有 stylesheet_link_tag，js 有 javascript_link_tag。图片呢？

image_tag

资产

我认为您对“外部”资产的作用感到困惑。

如果资产真正是外部的（例如Google's JQuery repo），您可以分别使用javascript_include_tag 或stylesheet_link_tag 来引用它们：

<%= javascript_include_tag "https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js" %>

这基本上会在运行时将以下内容添加到您的布局中：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

如果这是您想要的，您最好将外部 repos 调用添加到您的 #app/views/layouts/application 文件（如上）。

Rails 资产

然而....

如果您将它们存储在本地，它们显然不是“外部”资产。

因此，您要么必须从其真实的外部存储库中调用它们，要么在您的应用中本地使用它们。

如果您乐于在本地使用它们（有责任保持它们更新），您不妨查看Rails Assets：

这是一个 gem 存储库（您必须将 source https://rails-assets.org 添加到您的 Gemfil），它允许捆绑程序 ping 他们的服务器以获取基于资产的 gem。

它旨在像Bower 一样工作 - 获取任何公共回购并将它们转换为宝石。它允许您将外部存储库调用到您的应用程序中：

#Gemfile
gem "rails-assets-jquery.easing"

#app/assets/javascripts/application.js
//= require jquery.easing

这将基本上存储您希望在资产管道中使用的 JS/CSS 的本地版本，允许您将其包含在 sprockets require 指令中。

最大的区别在于，由于这些资产是通过gem系统下载的，因此每次运行bundler时都会更新它们。

我们使用它，虽然有时它可能有点棘手，但它非常值得。

【讨论】：

感谢您的解释（我期待您的回答 :)）但是我在外部项目中添加的那些自定义 css 和 js 怎么样？如何将它们添加到 Rails 项目中？当我添加他们在帖子中收到错误帖子时

【解决方案2】：

要么全部放到public目录下，然后用html的<script>、<link>、≤img>标签来引用资产。您将失去一些 Sprockets 功能，例如缩小和消化，但这没什么大不了的。
提及application.css / application.js 中的所有资产，或者创建一个新的清单文件，例如custom.css / custom.js，在此处列出要使用的资产，然后将这两个文件添加到：
```
Rails.application.config.assets.precompile += %w( custom.css custom.js )
```

【讨论】：

【解决方案3】：

您的 application.js 和 application.css 中有 require _ 树吗？如果没有，只需将其添加到两个文件中并重新启动服务器。

require_tree 指令告诉 Sprockets 递归地将指定目录中的所有 JavaScript 文件包含到输出中。这些路径必须相对于清单文件指定。您还可以使用 require_directory 指令，该指令仅包含指定目录中的所有 JavaScript 文件，无需递归。

Check out this guide

希望对您有所帮助。 :)

【讨论】：