アセットパイプライン

Ruby/Rails

アセットパイプライン：JavaScriptやCSSやそれらの拡張言語で書かれたアセットを最小化 (minify: スペースや改行を詰めるなど) または圧縮して連結するためのフレームワーク。分割されたアセットファイルを一つにまとめて配信することで、開発効率と読み込み時間の短縮を両立する。
sprockets-rails gemによって実装され、デフォルトで有効になっている。

概要

  1. 拡張言語が用いられているファイルをアセットディレクトリに分類する
  2. マニフェストファイルに基づいて処理対象をRailsに指示
  3. Rails内のプリプロセッサエンジンがプリプロセス（プリコンパイル、連結、最小化）を実行

アセットディレクトリ

目的別

  • app/assets: 現在のアプリケーション固有のアセット
  • lib/assets: 現在のアプリケーションの範疇を超えた（複数のアプリで共有される）ライブラリ用のアセット
  • vendor/assets: サードパーティのアセット（デフォルトでは存在しない）

マニフェストファイル

アセットディレクトリ内のファイルをどのように一つのファイルにまとめるかをRailsに指示する。
assets/stylesheets/application.css

/*
 .
 .
 .
 *= require_tree .
 *= require_self
*/

require_tree .でapp/assets/stylesheetsディレクトリ（サブディレクトリを含む）中のすべてのCSSファイルが、アプリケーションCSSに含まれるようにしている。
また、require_selfでこのファイル自体も対象に含めている。

プリプロセッサエンジン

Railsはどのプリプロセッサを使うのかをファイル名の拡張子を使って判断して実行し、ブラウザに配信できるようにファイルを結合する。

Rails6.0以降ではJavascript拡張言語部分をWebpackerに移譲している

CSSとJavaScriptのファイルの連結はsprocketsが担っていた。

Webpacker

webpackのRailsラッパー。

webpack

Javascriptのアセットをまとめるためのアセットバンドラー。