はじめに
学習中にアセットパイプラインという言葉を聞いて何なのか気になったので調べたことをアウトプットしようと思います。
アセットパイプラインとは何なのか
Web画面上にデザインを反映させるためにHTMLに紐付くCSSやJavaScript、Imageファイルを記述・作成することです。
アセットパイプラインの流れ
1.コンパイル
CoffeeScript, SCSS, ERB, Slim等で記述されたコードをコンパイルして、ブラウザが認識できるJSやCSSファイルとして扱う。
2.アセットの連結
複数のJS, CSSファイルを１つのファイルに連結する事で読み込み時のリクエストを減らし、全て読み込むまでの時間を短縮する。
例えば、Railsで開発をしていてコントローラ毎にCSSファイルを作成したいという時にapplication.cssに@import"users";とか書きますよね?あれのことです。
3.アセットの圧縮
スペース、改行、コメントを削除してファイルを最小化し通信量を節約する。
4.ダイジェストの付与
コードの内容からハッシュ値を算出してファイル名の末尾に付与する。こうする事でコードが変更されればキャッシュの影響で内容が反映されないといった問題を防ぐ。
ブラウザにアセットを読み込ませるには
RailsでCSSを読み込むにはstylesheet_link_tag,
JavaScriptを読み込むにはjavascript_include_tagというヘルパーメソッドを使うですがこれは既にapplication.htmlで記述されている。
これらはアセットパイプラインによって連結された結果のファイルです。
連結結果のファイルをどうやって生成するか
application.cssやapplication.jsといったマニフェストファイルに記述する。
・CSSの場合
@import "users";
といった感じで書く。
・JavaScriptの場合
//= require rails-ujs
//= require jquery
//= require bootstrap-sprockets
//= require activestorage
//= require turbolinks
//= require_tree .
JSのマニフェストファイルは「//=」で始まる行をアセットパイプラインに指示を伝える行。
require_treeは指定されたディレクトリ配下の全てのファイルを読み込む。