アセット (assets) [Rails] – Site-Builder.wiki

アセットパイプライン

参考：

アセットパイプライン | Rails ガイド [公式]

Rails Asset Pipeline がうまくいかないときの問題の切り分けかた – Qiita

アセットパイプライン – Qiita

The Asset Pipeline | Ruby on Rails Guides [Official]

Sprockets

参考：

rails/sprockets-rails: Sprockets Rails integration – GitHub

rails/sprockets: Rack-based asset packaging system – GitHub

ドキュメント

参考：

Documentation for sprockets-rails | RubyDoc.info

Documentation for sprockets | RubyDoc.info

sprockets/how_sprockets_works.md at master · rails/sprockets – GitHub

sprockets/extending_sprockets.md at master · rails/sprockets – GitHub

概要

参考：

Sprockets の仕組み – Qiita

Sprockets 再考モダンな JS のエコシステムと Rails のより良い関係を探す – Qiita

Rails は assets に注意しろ – Qiita

Rails Asset の管理についてまとめる – Qiita

Sprockets について復習する | ABC Blog

Rails Asset / Sprockets 関係 gem 使ったものの感想 | 元フリーエンジニアライフ

image_tag

参考：

image_tag メソッドを使ったイメージタグの作成 | Ruby on Rails入門

<%= image_tag ‘画像ファイル名’ %> で画像を表示 – Qiita

image_tag – ActionView::Helpers::AssetTagHelper | Ruby on Rails API [Official]

image_tag (ActionView::Helpers::AssetTagHelper) – APIdock

How to make your application assets cachable in Rails | makandra dev

スタイルシート

参考：

Rails アプリのアセットプリコンパイルを高速化するコツ翻訳 | TechRacho

プリコンパイル

参考：

アセットをプリコンパイルする | Rails ガイド [公式]

アセットパイプラインのコードリーディング | freedom-man

precompile – sprockets-rails/task.rb at v3.2.1 · rails/sprockets-rails – GitHub

compile – sprockets/manifest.rb at v3.7.2 · rails/sprockets – GitHub

assets_manifest – sprockets-rails/railtie.rb at v3.2.1 · rails/sprockets-rails – GitHub

precompiled_assets – sprockets-rails/railtie.rb at v3.2.1 · rails/sprockets-rails – GitHub

Sprockets::Rails::Task.new – sprockets-rails/railtie.rb at v3.2.1 · rails/sprockets-rails – GitHub

compile_match_filter – sprockets/legacy.rb at v3.7.2 · rails/sprockets – GitHub

logical_paths – sprockets/legacy.rb at v3.7.2 · rails/sprockets – GitHub

ローカルでアセットをプリコンパイルする

参考：

ローカルでプリコンパイルを行なう | Rails ガイド [公式]

assets | Rails ガイド [公式]

set_default_precompile

参考：

set_default_precompile – sprockets-rails/railtie.rb at v3.2.1 · rails/sprockets-rails – GitHub

LOOSE_APP_ASSETS

参考：

LOOSE_APP_ASSETS – sprockets-rails/railtie.rb at v3.2.1 · rails/sprockets-rails – GitHub

マニフェスト

参考：

マニフェストファイルとディレクティブ | Rails ガイド [公式]

require_tree

参考：

Require tree in asset pipeline – Stack Overflow

asset_path

参考：

Rails の asset_path は何をやってくれてるのか | sasata299’s blog

asset_path – ActionView::Helpers::AssetUrlHelper | Ruby on Rails API [Official]

アセットにリンクするコードを書く | Rails ガイド [公式]

ActionView::Helpers::AssetUrlHelper

参考：

ActionView::Helpers::AssetUrlHelper | Ruby on Rails API [Official]

image-url

参考：

Rails4 では background: url(“assets/hoge.png”) の書き方は動かない話 – Qiita

CSS と Sass | Rails ガイド [公式]

digest_path

Rails.application.assets["path/to/asset.png"].digest_path

参考：

how to access an asset_path with a digest in a Rails initializer – Stack Overflow

アセットを圧縮する

圧縮可能なファイル形式に対しては、デフォルトで圧縮されたアセットを生成する。

明示的に圧縮を有効にする場合は、次の設定を追加する。

config.assets.gzip = true

参考：

gzip 圧縮されたアセットを提供する | Rails ガイド [公式]

Address comments on Gzip implementation · rails/rails@8e31fa3 – GitHub

Rails not serving compressed SVG files – Stack Overflow

ERB で使うメソッドを追加する

MyApp::Application.assets.context_class.instance_eval do
  def user_name
    "Name: #{@user.name}"
  end
end

参考：

Method: Sprockets::Configuration#context_class — Documentation for sprockets | RubyDoc.info

How to specify a binding for Erb evaluation / rendering? – Stack Overflow

SVG ファイル

参考：

rails で svg を view に表示する | joppot

Render an Inline SVG in Rails (or Middleman) | Cobwwweb

A more efficient and organized workflow for SVGs | Thoughtbot

How do I display SVG image in Rails? – Stack Overflow

Includes in ERB for Rails – Stack Overflow

SVG の use タグにおける host の設定

参考：

How to use svg ‘use’ statement with Rails sprockets asset helpers? – Stack Overflow

inline_svg

参考：

jamesmartin/inline_svg: Embed SVG documents in your Rails views and style them with CSS – GitHub

inline_svg – inline_svg/helpers.rb at v1.3.1 · jamesmartin/inline_svg – GitHub

read_svg – inline_svg/helpers.rb at v1.3.1 · jamesmartin/inline_svg – GitHub

named – inline_svg/asset_file.rb at v1.3.1 · jamesmartin/inline_svg – GitHub

FindsAssetPaths.by_filename – inline_svg/finds_asset_paths.rb at v1.3.1 · jamesmartin/inline_svg – GitHub

svgeez

参考：

jgarber623/svgeez: A Ruby gem for automatically generating an SVG sprite from a folder of SVG icons – GitHub

楽ちんカスタム！Rails で SVG スプライトを使おう | KRAY Inc

Sprockets::Svg

Sass / SCSS で SVG 形式のアセットを PNG 形式に変換してリンクする。

background-image: image-url("graphics.svg.png")

ERB で SVG 形式のアセットを PNG 形式に変換してリンクする。

<%= image_tag "graphics.svg.png" %>

参考：

byroot/sprockets-svg: SVG toolchain for sprockets – GitHub

Documentation for sprockets-svg | RubyDoc.info

sprockets-svgo

Sass / SCSS 内で SVG を Data URI として埋め込む。

background-image: svgo-data-uri("graphics.svg");

スタイルシートを ERB で処理して SVG を Data URI として埋め込む。

background-image: url("<%= svgo_asset_data_uri('graphics.svg') %>");

参考：

javan/sprockets-svgo – GitHub

フォントをプリコンパイルする

探索されるアセットパスの下に配置する。

vendor/assets
lib/assets
app/assets

それ以外のパスの場合は、config.assets.paths に追加する。

config.assets.precompile に必要なファイルを追加する。複数のファイルをまとめて指定するためにグロブパターンが使える。

config.assets.precompile += %w[
  fonts/*.{eot|woff|woff2|ttf|svg}
]

参考：

Rails4 でフォントの precompile に関する問題の解決策 – Qiita

Using fonts with Rails asset pipeline – Stack Overflow

font-url

Sass / SCSS ファイルでアセットパイプラインのフォントを参照する。

@font-face {
  ...
  src: font-url("path/to/icons.woff") format("woff");
  ...
}

参考：

Rails でカスタムフォントを使う時の指定方法 | 地方でリモートワーク in Iwate

font_path

スタイルシートを ERB で処理して、アセットパイプラインのフォントを参照する。

@font-face {
  ...
  src: url("<%= font_path('path/to/icons.woff') %>") format("woff");
  ...
}

参考：

font_path – ActionView::Helpers::AssetUrlHelper | Ruby on Rails API [Official]

タスク

参考：

rake_tasks – sprockets-rails/railtie.rb at v3.2.1 · rails/sprockets-rails – GitHub

rails assets:clean

古くなったアセットを削除する。デフォルトでは2世代分のアセットと1時間以内にコンパイルされたアセットが残される。ローリングデプロイする際に古いアセットを安全に削除できる。

$ rails assets:clean

参考：

assets – Rails のコマンドラインツール | Rails ガイド [公式]

clean – sprockets/manifest.rb at v3.7.2 · rails/sprockets – GitHub

keep – sprockets/sprocketstask.rb at v3.7.2 · rails/sprockets – GitHub

clean[keep] – sprockets-rails/task.rb at v3.2.1 · rails/sprockets-rails – GitHub

Customize – rails/sprockets-rails: Sprockets Rails integration – GitHub

rails assets:clobber

生成したアセットを全て削除する。public/assets 及び public/packs をフォルダごと削除する。

参考：

assets – Rails のコマンドラインツール | Rails ガイド [公式]

Clear the cache from the Rails asset pipeline – Stack Overflow

Sprockets のキャッシュをクリアする

tmp/cache 以下のファイル・ディレクトリを全て削除する。

$ rails tmp:cache:clear

※アセット以外のキャッシュも全て削除されるので注意。(Bootsnap や Webpacker などが使用している。)

参考：

tmp | Rails ガイド [公式]

アセットのキャッシュストア | Rails ガイド [公式]

アセットの激遅 Precompile を解決するまでの軌跡 – Qiita

How to clear Sprockets cache? – Stack Overflow

minify

CSS 及び JavaScript を圧縮して軽量化する。

# config/environments/production.rb
config.assets.js_compressor  = Uglifier.new(harmony: true)
config.assets.css_compressor = :sass

参考：

compressor を指定しても、minify されない時の対処法 – Qiita

Rails 4 にアップグレードすると assets:precompile しても minify されない | Shoken Startup Blog

Rails not minifying – Stack Overflow

Uglifier

JavaScript を圧縮して軽量化する。

config.assets.js_compressor = Uglifier.new(harmony: true)

参考：

uglifier とは何をする gem なのか | odaillyjp blog

Rails で ES6 の機能を使うとプリコンパイルが通らない (Uglifier がエラーを吐く) 問題 – Qiita

Rails で ES6 のコンパイルが失敗する場合 | 約束の地

uglifier の ES6 部分におけるエラー | ハッキングバカ

rails assets のコンプレッサにオプションを渡す | このコードわからん

rails + sprockets + uglifier で Copyright を残したまま compress する | ぼっち勉強会

lautis/uglifier: Ruby wrapper for UglifyJS JavaScript compressor – GitHub

Documentation for uglifier | RubyDoc.info

Uglifier::Error: Unexpected token: punc ((). To use ES6 syntax, harmony mode must be enabled with Uglifier.new(:harmony => true) · Issue #127 · lautis/uglifier – GitHub

.sprockets-manifest-*.json

アセット名から生成されたダイジェスト付きファイルを参照するための情報が出力されている JSON 形式のマニフェスト。public/assets フォルダ内に一つだけ置かれているべきもの。rails assets:precompile で生成される。

参考：

Rails asset pipeline serves old manifests – Stack Overflow

production 環境における assets をルックアップする

Rails.application.assets_manifest.assets を使う。

Rails.application.assets_manifest.assets["background.png"]

参考：

Rails.application.assets is nil in production · Issue #237 · rails/sprockets-rails – GitHub

Rails.application.assets returns nil on version 3.5.2 · Issue #294 · rails/sprockets-rails – GitHub

config.assets

Sprockets によるアセット生成の設定。

参考：

config.assets – sprockets-rails/railtie.rb at v3.2.1 · rails/sprockets-rails – GitHub

OrderedOptions – sprockets-rails/railtie.rb at v3.2.1 · rails/sprockets-rails – GitHub

ActiveSupport::OrderedOptions – rails/ordered_options.rb at v5.2.1.1 · rails/rails – GitHub

config.assets.paths

デフォルトで探索されるパス

vendor/assets
lib/assets
app/assets

参考：

パスの検索 – アセットパイプライン | Rails ガイド [公式]

“app/assets” – rails/configuration.rb at v5.2.1.1 · rails/rails – GitHub

append_assets_path – sprockets-rails/railtie.rb at v3.2.1 · rails/sprockets-rails – GitHub

config.assets.paths – sprockets-rails/railtie.rb at v3.2.1 · rails/sprockets-rails – GitHub

append_path

参考：

append_path – sprockets-rails/railtie.rb at v3.2.1 · rails/sprockets-rails – GitHub

append_path – sprockets/paths.rb at v3.7.2 · rails/sprockets – GitHub

config.assets.prefix

public の下に作成されるフォルダー名を指定する。デフォルトは "/assets" 。

参考：

development 時に config.assets.prefix = “/dev-assets” したら戻らなくなった件 | zoomAroid

sprockets-rails/railtie.rb at v3.2.1 · rails/sprockets-rails – GitHub

Public folder size is huge – Stack Overflow

Why would you be using config.assets.prefix in rails? – Stack Overflow

Rails.public_path

public ディレクトリの場所を表すパス。

参考：

Rails で public ディレクトリを指し示す定数は Rails.public_path – Qiita

public_path – Rails | Ruby on Rails API [Official]

config.assets.debug

true：各ファイルを個別に link タグで呼び出す。プリコンパイル済みファイルが存在していても、ソースが新しければその場で再コンパイルされる。 (development 用)
false：エントリーごとに一つのファイルにまとめて一つの link タグで呼び出される。プリコンパイル済みファイルが存在すれば、ソースファイルが更新されていても再コンパイルすることなくプリコンパイル済みファイルを読み込む。 (production 用)

参考：

development 環境下で precompile すると，以降 development で assets が上手く読み込まれない | インターファーム開発部ブログ

Rails アプリで CSS が更新されない… | tamo’s blog

Faster web page requests in Rails development | Art+Logic

Turning Debugging Off | Ruby on Rails Guides [Official]

What exactly “config.assets.debug” setting does? – Stack Overflow

config.assets.resolve_with

:manifest：マニフェストファイルからコンパイル済みファイルを探す
:environment：オンザフライでコンパイルする

参考：

config.assets.resolve_with – sprockets-rails/railtie.rb at v3.2.1 · rails/sprockets-rails – GitHub

Documentation outdated: config.assets.resolve_with = %i[ environment ] is the new default · Issue #398 · rails/sprockets-rails – GitHub

How does config.assets.resolve_with work? · Issue #397 · rails/sprockets-rails – GitHub

config.serve_static_files

参考：

404 not found error for assets in rails 4 production enviroment – Stack Overflow

テスト環境におけるアセット

参考：

Ruby on Rails のアセットパイプラインの挙動を環境ごとに学ぶ | 30歳からのプログラミング

Precompiled assets in Rails test environment not used – Stack Overflow

Assets are not loaded during capybara/rspec spec – Stack Overflow

asset_host / compute_asset_host

アセットを配信するサーバーを指定する。

config.action_controller.asset_host = "assets.example.com"

参考：

Rails の Asset を絶対パスで扱う – Qiita

CDN で静的なアセットを提供する | Rails ガイド [公式]

compute_asset_host – ActionView::Helpers::AssetUrlHelper | Ruby on Rails API [Official]

ActionView::Helpers::AssetUrlHelper | Ruby on Rails API [Official]

Assets are not loaded during capybara/rspec spec – Stack Overflow

Heroku でアセットをプリコンパイルする

参考：

Heroku 本番環境にて、Asset が正常に反映されない。- Qiita

Heroku 上の Sprockets キャッシュを削除する – Qiita

Heroku で css が突然読み込まれなくなったので、改善方法を知りたい。- teratail

アセットの再コンパイルが必要か判定する

参考：

How we sped up our asset precompile by removing it | Tanda Product Team

無名関数でラップする

参考：

Wrapping Requires in Anonymous Function · Issue #301 · sstephenson/sprockets – GitHub

jQuery がコンフリクトする / $.noConflict を使う

参考：

Conflicts between jQuery and javascript – Stack Overflow

non-stupid-digest-assets

参考：

alexspeller/non-stupid-digest-assets: Fix the Rails 4 asset pipeline to generate non-digest along with digest assets – GitHub

rake assets:precompile で digest ハッシュ無しのアセットを生成する方法 – Qiita

Inability to compile nondigest and digest assets breaks compatibility with bad gems · Issue #49 · rails/sprockets-rails – GitHub

Non-digested asset names in Rails 4 | Bibliographic Wilderness

Sprockets::BumbleD

Babel / ES6 を使う。

参考：

rmacklin/sprockets-bumble_d: Sprockets plugin to transpile modern javascript using Babel, useful while migrating to ES6 modules – GitHub

Sprockets::Commoner

参考：

Shopify/sprockets-commoner: Use Babel in Sprockets to compile JavaScript modules for the browser – GitHub

顧客が本当に求めていた sprockets、sprockets-commoner の紹介 – Qiita

Rails に React と ES6 と Material-UI を導入する手順 (sprockets-commoner gem を使って) – Qiita

ts_assets-rails

参考：

bitjourney/ts_assets-rails: Exports Rails assets to TypeScript as React components – GitHub

TypeScript と Rails Assets Pipeline を融合する`ts_assets` | kenju’s blog

sprockets-media_query_combiner

参考：

aaronjensen/sprockets-media_query_combiner – GitHub

記事をシェアする：

アセットパイプライン

Sprockets

ドキュメント

概要

image_tag

スタイルシート

プリコンパイル

ローカルでアセットをプリコンパイルする

set_default_precompile

LOOSE_APP_ASSETS

マニフェスト

require_tree

asset_path

ActionView::Helpers::AssetUrlHelper

image-url

digest_path

アセットを圧縮する

ERB で使うメソッドを追加する

SVG ファイル

SVG の use タグにおける host の設定

inline_svg

svgeez

Sprockets::Svg

sprockets-svgo

フォントをプリコンパイルする

font-url

font_path

タスク

rails assets:clean

rails assets:clobber

Sprockets のキャッシュをクリアする

minify

Uglifier

.sprockets-manifest-*.json

production 環境における assets をルックアップする

config.assets

config.assets.paths

append_path

config.assets.prefix

Rails.public_path

config.assets.debug

config.assets.resolve_with

config.serve_static_files

テスト環境におけるアセット

asset_host / compute_asset_host

Heroku でアセットをプリコンパイルする

アセットの再コンパイルが必要か判定する

無名関数でラップする

jQuery がコンフリクトする / $.noConflict を使う

non-stupid-digest-assets

Sprockets::BumbleD

Sprockets::Commoner

ts_assets-rails

sprockets-media_query_combiner

関連記事

Ruby on Rails [Introduction]

プログレスバーを実装する方法 [Rails]

web-console のソース [Rails]

MySQL を使う方法 [Rails]

キーワード検索を行う方法 [Rails]

ActiveModel::Attributes の使い方 (Attributes API) [Rails]

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル