Ruby on Rails-集成現有項目-將CSS / JS文件放在哪里並調用它們？

Question

我已經下載了AdminLTE Bootstrap主題 ，並根據需要對其進行了修改。 作為分開的頁面，它們工作良好。 這是工作樣本的結構：

├───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根目錄中。 我已經將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 ，並且在運行服務器時，頁面呈現，但是由於html中的相對路徑硬編碼，因此沒有CSS，找不到js。

我的問題：

有沒有更簡單的方法將我的項目集成到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)

3. 無需觸摸application.js ， application.css 。 //require_tree . 已經做好了。

4. 注釋掉所有<stylesheet>和<script>行，這些行在頁面中使用這些文件的位置。 他們已經過時了。

5. 在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以防止加載不必要的資源，但是在至少它正在運行。 歡迎任何改進。