# [Rails4][front-end]在不修改前端資源(.css,.js,圖片等)排列位置的情形下引用前端Assets檔

###### tags: `Rails4`,`front-end`

Ruby : 2.2.6
Rails: 4.2.8

假設現在做一個專案,想要套用網路現成的模板如[adminLTE](https://adminlte.io/)等,
通常這類模板會使用許多的前端套件,而這些套件都是將css跟js混合放在一個資料夾內,
此時要根據rails預設的方式將css跟js取出後各自分開放在assets/stylesheets跟assets/javascripts資料夾中是很不切實際的作法,

這時直接將前端資源檔原封不動放在vendor資料夾(或其他放前端資源用的資料夾也可)內,
再藉由修改config/initializers/assets.rb來引用這些資源.

假設我們把前端檔案放在vendor/admin-lte內,

現在想要引用vendor/admin-lte/plugins/fontawesome-free/css/all.min.css
跟dist/css/adminlte.min.css,

作法如下:

config/initializers/assets.rb

#...

#此段語法是將陣列內的路徑加入編譯路徑中
[
  "vendor/assets/",
  "vendor/admin-lte/"
].each{|x|
  Rails.application.config.assets.paths << x
}

#此段語法是設定要進行編譯的檔案
Rails.application.config.assets.precompile += [

    #編譯特定檔案的寫法
    "plugins/fontawesome-free/css/all.min.css",
    "dist/css/adminlte.min.css",
  
    #也可改成以下寫法一次引用多個檔案  
    # css
    "plugins/*.css",
    "dist/*.css",

    # js
    "plugins/*.js",
    "dist/*.js",

    #img
    "dist/img/*.jpg",
    "dist/img/*.png",
]

在view中引用資源

...
 <!--css-->
  <%= stylesheet_link_tag 'plugins/fontawesome-free/css/all.min.css', :media => "all" %>
  <%= stylesheet_link_tag  'dist/css/adminlte.min.css' ,:media => "all" %>

...

<!--js-->
<%= javascript_include_tag "plugins/jquery/jquery.min.js" %>

...

<!--image-->
 <!--<img src="dist/img/user2-160x160.jpg" class="img-circle elevation-2" alt="User Image">-->
<%= image_tag("dist/img/user2-160x160.jpg",class: "img-circle elevation-2" ,alt: "User Image") %>

...

>副檔名不須省略