了解 Rails 資產管道

Ruby on Rails 是一個用 Ruby 編寫的全棧 Web 開發框架。 對於剛開始使用 Ruby on Rails 的開發人員來說，很多事情都會感覺很神奇，比如視圖可訪問的控制器中定義的實例變量。 另一個這樣的事情是資產管道，但它有時會造成混亂，尤其是在將事物轉移到生產環境時。 一個簡單的谷歌搜索會在那個時候產生一個解決方案，但它不會感覺完整。 這篇文章將使您對 Rails 資產管道有更好的理解，這樣您下次就不會被它困住了。

Rails 資產管道

編寫在 app/assets 和 vendor/assets 文件夾中的代碼構成了任何 Ruby on Rails 應用程序中的大部分前端。 我們在此文件夾中編寫的任何 Javascript 或 CSS 在提供給生產中的瀏覽器之前都會被編譯和縮小。 所有這些都由默認情況下與 Rails 一起提供的資產管道自動處理。 此資產管道由 sprockets-rails gem 實現。 它甚至還允許我們用不同的語言或預處理器編寫資產，並將它們編譯為瀏覽器可以理解的 CSS 和 Javascript。

創建時的 Ruby on Rails 應用程序包含兩個清單文件 application.js 和 application.css。 默認情況下，這兩個文件包含幾行有意義的代碼，這些代碼被認為是強制性的。 讓我們看一下這些文件的內容，並嘗試找出它們的用途。

清單文件

/*
* 這是一個清單文件，將被編譯成 application.css，其中將包含所有文件
* 下面列出。
*
* 此目錄中的任何 CSS 和 SCSS 文件、lib/assets/stylesheets、vendor/assets/stylesheets、
* 或插件的供應商/資產/樣式表（如果有）可以使用相對路徑在此處引用。
*
* 您可以自由地將應用程序範圍的樣式添加到此文件，它們將出現在頂部
* 編譯文件，但通常最好為每個樣式範圍創建一個新文件。
*= 要求自我
*= 要求樹。
*/

這是默認的 CSS 清單文件，它將所有提到的文件包含在一個 application.css 文件中。 這裡的 require 關鍵字的作用與 ruby​​ 中的 require 關鍵字相同。 它使文件在調用它的文件中可訪問。 require 關鍵字首先在 app/assets/ 文件夾中查找提到的文件，如果在那裡找不到，它將在 vendor/assets/ 文件夾中查找。

“require_self”和“require_tree”。

'require_self' 將調用它的那個文件的所有內容，在我們的例子中是 application.css 加載到它提到的行中。 '需要樹'。 將引用它的同一文件夾中的所有內容加載到提到它的行中。 如果我們需要包含子文件夾的所有文件，請使用“require_tree ./folder_name/”。 這在使用純 CSS 時很有幫助。 但是如果我們想使用 SASS/SCSS，使用全局變量來獲取顏色等，我們需要使用 SCSS 方法 `@import` 而不是 `require` 來導入 CSS 文件。

資產路徑

app/assets 和 vendor/assets 文件夾之間沒有太大區別。 按照慣例，我們建議將 app/assets 文件夾用於我們創建的自定義 CSS 和 Javascript 文件，並將用戶 vendor/assets 文件夾用於任何第三方插件的 CSS 和 Javascript。

搜索資產的順序如下：

/應用程序/資產/圖像

/app/assets/javascripts

/app/assets/樣式表

/供應商/資產/圖像

/資產/javascripts

/資產/樣式表

/[寶石包含的資產]

資產預編譯

要編譯所有文件並縮小它們，我們應該運行 rake assets:precompile。 此命令啟動一個 rake 任務，該任務查找 application.css 中提到的文件，如果它們是用 SCSS/SASS 編寫的，則將其編譯為 CSS，然後作為 application.css 文件的一部分添加。 這個 application.css 文件使用樣式錶鍊接標籤鏈接到每個頁面，這是一個 Rails 視圖助手。 application.js 也是如此。

默認情況下，只有 application.css 和 application.js 是清單文件，因此它們是預編譯的。 但是我們可能希望使用一個或多個文件作為不同佈局的清單文件。 在這種情況下，這些文件應該添加到 config/initializers/asset.rb 的預編譯數組中

Rails.application.config.assets.precompile += ['dashboard.js', 'dashboard.css']

在這裡，與 application.css 和 application.js 文件一起，dashboard.css 和 dashboard.js 文件被視為清單。 所以在預編譯期間，這些文件也被預編譯。 預編譯後，這些新生成的文件將放置在 public/assets 文件夾中。

應用程序-8cf9a6a42ecd8238b5d928c5ad7b4f4b440061daa2da0a0fe2016c7e92c9d955.css

應用程序-ca682b893b6c32b8d053913db011cb78977866d8d1d6d95cf676e804adef35da.js

應用程序-8cf9a6a42ecd8238b5d928c5ad7b4f4b440061daa2da0a0fe2016c7e92c9d955.css.gz

應用程序-ca682b893b6c32b8d053913db011cb78977866d8d1d6d95cf676e804adef35da.js.gz

儀表板-fb0bd7de7060c10f28a74d784f046a519ef3b170645b00ee91a66953dc686554.css

儀表板-fb0bd7de7060c10f28a74d784f046a519ef3b170645b00ee91a66953dc686554.css.gz

公共/資產文件夾

這是我們可以在 Rails 應用程序中找到資產的第三個文件夾，但不鼓勵直接在此處添加資產，除非它是靜態資產並且根本不會更改。 此外，我們將無法使用 rails url helpers 引用放置在此文件夾下的任何文件。 資產通常僅在生產環境中進行預編譯。 如果您希望在本地預編譯資產，請在本地運行 rake assets:precompile RAILS_ENV=production。

儀表板-fb0bd7de7060c10f28a74d784f046a519ef3b170645b00ee91a66953dc686554.css

儀表板-fb0bd7de7060c10f28a74d784f046a519ef3b170645b00ee91a66953dc686554.css.gz

如果你看一下上面的文件名，它們附有隨機的 64 個字符。 這個過程稱為指紋識別，它使整個文件名依賴於文件的內容。 這種技術在緩存資產方面非常有用。 如果文件內容保持不變，文件名也保持不變，因此可以緩存。 如果內容更改，名稱會更改，緩存也會更改。

Sass 資產 URL 助手

每當我們將一些字體、圖像放在 app/assets 文件夾中，然後嘗試從 CSS、SCSS 文件中訪問它們時，它在開發中都可以正常工作。 但大多數時候它會在生產中中斷說資源未找到/assets/bg-image.jpg。 這尤其發生在我們包含的字體包中。 這是因為我們會給背景圖像這樣的東西

背景圖片: url('/images/header_background.jpg');

在生產中，它會嘗試從 /images/header_background.jpg 中獲取圖像。 但是除非我們將文件放在公共目錄中，否則名為“header_background.jpg”的公共文件夾中不會存在任何文件。 我們通常會將它們放在 app/assets 或 vendor/assets 中。 因此，在預編譯期間，它將被編譯並將指紋添加到所有無 js/CSS 資產中。 因此，所有圖像文件、字體文件都會在其名稱中帶有指紋，這是行不通的。

header_background-5c2d30983dca95c015dda3f0a581ff39e9dbef809ec6290d1f8a771cc6a42e2b.png company_logo-ad045423017cb12f23b6c2ccb746518586f0cb77080d7cb38731800af6a4b4c

文件如上所示編譯並添加到公用文件夾中。 所以要在 CSS 中引用它，我們需要使用 rails 提供的資產路徑助手。 而不是 'url('/images/header_backgroung.png')' 使用 'image-url('header_background.png')'。 預編譯後，這將被添加為

背景圖像： url('/images/header_background-5c2d30983dca95c015dda3f0a581ff39e9dbef809ec6290d1f8a771cc6a42e2b.png');

我希望這篇文章能幫助您了解 Rails 資產管道。 更好地理解資產管道將幫助您保持前端相關代碼更有條理和可維護性。 如果您想進一步探索資產管道，這裡是官方指南的鏈接。

請繼續關注我們的下一篇文章，了解您是否擁有適合情緒分析的數據

計劃從網絡獲取數據？ 我們是來幫忙的。 讓我們知道您的要求。