Ruby on Rails - 集成现有项目 - 在哪里放置 css/js 文件并调用它们？

Question

我已经下载了AdminLTE Bootstrap theme 并根据我的需要进行了修改。作为单独的页面，它们运行良好。这是工作样本的结构：

├───homepage.html
├───dashboard.html
├───(... other html pages)
├───bower_components                                 
│   ├───bootstrap                                    
│   │   ├───dist                                     
│   │   │   ├───css                                  
│   │   │   ├───fonts                                
│   │   │   └───js                                   
│   │   ├───fonts                                    
│   │   ├───grunt                                    
│   │   ├───js                                       
│   │   ├───less                                     
│   │   │   └───mixins                               
│   │   └───nuget                                    
│   ├───bootstrap-datepicker                         
│   │   ├───.github                                  
│   │   ├───build                                    
│   │   ├───dist                                     
│   │   │   ├───css                                  
... other bootstrap components, which I will use. 
│   ├───Ionicons                                     
│   │   ├───css                                      
│   │   ├───fonts                                    
│   │   ├───less                                     
│   │   ├───png                                      
│   │   │   └───512                                  
│   │   ├───scss                                     
│   │   └───src                                      
│   ├───jquery                                       
│   │   ├───dist                                     
│   │   ├───external                                 
│   │   │   └───sizzle                               
│   │   │       └───dist                             
│   │   └───src                                      
│   │       ├───ajax                                 
│   │       │   └───var                              
...
│   └───select2                                      
│       ├───.github                                  
│       ├───dist                                     
│       │   ├───css                                  
│       │   └───js                                   
│       │       └───i18n                             
│       ├───docs                                     
│       ├───src                                      
├───dist                   # AdminLTE native css, img and js                          
│   ├───css                                          
│   │   ├───alt                                      
│   │   └───skins                                    
│   ├───img                                          
│   │   └───credit                                   
│   └───js                                           
│       └───pages                                    
└───plugins                  # other plugins I may use                        
    ├───bootstrap-slider                             
    ├───bootstrap-wysihtml5                                                        
    ├───input-mask                                   
    │   └───phone-codes                              
    ├───jQueryUI                                     
    ├───jvectormap                                   
    ├───pace                                         
    └───timepicker    

粗略地说，我有 bower_componets、dist 和 plugins，AdminLTE 将 css/js 文件和我修改后的 html 页面放在 dir root 中。我已将 image/css/js 路径更改为相对路径，并且可以正常工作。

<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.min.css">
  <!-- Ionicons -->
  <link rel="stylesheet" href="bower_components/Ionicons/css/ionicons.min.css">
  <!-- Theme style -->
  <link rel="stylesheet" href="dist/css/AdminLTE.min.css">
  <!-- AdminLTE Skins. Choose a skin from the css/skins
       folder instead of downloading all of them to reduce the load. -->
  <link rel="stylesheet" href="dist/css/skins/_all-skins.min.css">

但是，在 Ruby on Rails 中，我被告知将所有 css 文件放入 app/assets/stylesheets/ 并将所有 js 文件放入 app/assets/javascripts/，以编译整个文件以供使用。我把所有页面都放在public/static_pages，运行服务器时，页面渲染，但是没有找到css，没有找到js，因为相对路径硬编码在html中。

我的问题：

为了不改变这个目录结构，有没有一种更简单的方法可以将我的项目集成到 Rails 中？重组所有这些是一项耗时的任务，而我想要的是一个简单的演示，静态类型。我还在学习，想知道是否可以在以静态方式组织资源的同时以铁路方式绑定数据。

我正在使用 Rails 5.1。

PS：

css/js文件应该放到vendor吗？

Answer 1

我解决了这个问题：

1. 将所有必要的js/css放入app/assets
2. 通过将每一个添加到预编译数组 (config/initializers/assets.rb) 来预编译它们。

等于：

Rails.application.config.assets.precompile += %w( _all-skins.css AdminLTE.css bootstrap.css font-awesome.css ionicons.css)
Rails.application.config.assets.precompile += %w( adminlte.js bootstrap.js demo.js home_js.js)

1. 无需触摸application.js、application.css。 //require_tree . 已经完成了所有工作。

2. 注释掉页面中使用这些文件的所有<stylesheet> 和<script> 行。它们已经过时了。

3. 在app/views/layouts/application.html.rb中使用它们：

也就是说：

<%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<!-- AdminLTE specific css -->
<%= stylesheet_link_tag 'AdminLTE', 'bootstrap', '_all-skins', 'font-awesome', 'ionicons' %>
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
<!-- AdminLTE specific js -->
<%= javascript_include_tag 'adminlte', 'bootstrap', 'demo' %>
<!-- real external js -->
<%= stylesheet_link_tag :application, "https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic" %>

6. 页面特定的脚本应该包含在单独的文件中，比如我的homepage 有home_js.js；创建另一个文件，将其放入app/assets/javascripts，将其包含在预编译数组中，但在application.html.erb 中不 使用它，而是在真实内容页面pages/homepage.html.erb 中使用它：<%= javascript_include_tag "home_js" %>。这样一来，您就无法阻止额外的预编译工作，但您只是在一页中使用它们，而不是全部使用它们。

我知道有更好的解决方案，因为这意味着我必须非常清楚哪个页面使用哪个脚本/css，并且只将所有页面使用的页面添加到application.html.rb 以防止加载不必要的资源，但是至少它正在运行。欢迎任何改进。