Railsのアセットパイプライン

アセットパイプラインはgem 'sprokets-rails'で使えるようになるSproketsの機能。高級言語のコンパイル→アセットの連結→アセットの最小化→ダイジェストの付与を行う。

高級言語のコンパイル:Coffee Script, SCSS, ERB, Slimなどで書かれた言語をブラウザで認識できるJavaScript, CSSファイルに変換する。

アセットの連結:複数に別れた.cssとか.jsファイルを1つのファイルに連結することで読み込み時間を短縮する。

アセットの最小化:まとめたファイルの改行やスペースなどの人間のために書かれたものを削除することでファイルを最小化して通信量を節約する。

ダイジェストの付与:コードの内容からハッシュ値を算出してファイル名を変更する。ブラウザのキャッシュで修正が反映されないという問題を防げる。​

Bootstrapを使えるようにするための設定

gem 'bootstrap', '~> 4.4.1'
gem 'font-awesome-sass', '~> 5.12.0'
gem 'jquery-rails'

# app/assets/stylesheets/application.scss
@import 'custom';


# app/assets/stylesheets/custom.scss
@import "bootstrap";
@import 'font-awesome-sprockets';
@import "font-awesome";


# app/views/layouts/application.html.erb
<%= stylesheet_link_tag "application", media: "all", "data-turbolinks-track" => "reload" %>
<%= javascript_include_tag "application", "data-turbolinks-track" => "reload" %>
# app/assets/stylesheets/application.js
//= require jquery3
//= require popper
//= require bootstrap-sprockets
//= require_tree .


この記事が気に入ったらサポートをしてみませんか?