個人メモです。
##アセットパイプラインとは？
JSやCSSファイルの容量を最小化するためのフレームワーク。実行するのはスペースやコメントアウト削除などの記述の効率化とファイル数の削減。
複数ファイルをコンパイルして一つのファイル（jsは.js, cssは.css）にまとめるなど、WEBブラウザのリクエスト回数を減らし高速化につなげる。
Sprockets-railsというgemで実装され、デフォルトで有効になっていた。Sprocketsと呼ばれる。
###scssのコンパイル
railsにはデフォルトでscss-railsパッケージが入っている。Sprocetsはcssの圧縮にscss-railsを使用する。
##コンパイル後のファイル
コンパイル後のファイルは個別になるように固有のハッシュ値がつく（フィンガープリントと呼ぶ）
例えば、application.cssというファイルをコンパイルした場合は以下のようになる。
applciation-908e25f4bf641868d8683022a5b62f54.css
##コンパイル元のファイル
ファイルはassets配下に作成する。JSの場合は、app/assets/javascripts/ファイル名.coffee。scssの場合はapp/assets/stylesheets/ファイル名.scss
##ファイルのインポート方法
ファイルのインポートには、javascript_include_tagとstylesheet_link_tagを使う。
▼JS
<%= javascript_include_tag 'ｊｓファイルパス' %>`
ファイルパスは、app/assets/javascripts/配下で指定する。
test/index.jsであれば、
<%= javascript_include_tag 'test/index.js' %>
**▼css**
<%= stylesheet_link_tag 'cssファイルパス' %>
ファイルパスは、app/assets/stylesheet/配下で指定する。
test/index.cssであれば、
<%= stylesheet_link_tag 'test/index.css' %>`
**▼画像** 画像の場合は`image_tag 'ファイルパス'`を使う。
<%= image_tag "icons/rails.png" %>
app/assets/images/icons/rails.pngを参照している。
##アセットの置き場所 アセットの置き場所は用途に応じて３種類ある。
| ディレクトリ | 内容 |
|---|---|
| app/assets | 現在のアプリケーション独自のコード |
| lib/assets | 他のプロジェクトと共有するライブラリコード |
| vendor/assets | 外部団体が所有するフレームワーク |
いずれの場合もファイルを呼び出す時にrequire 'ファイル名'を使うため、異なるファイル名をつける。
app/assets/javascripts/home.js #require home
lib/assets/javascripts/navi.js #require navi
vendor/assets/javascripts/slider.js #require slider
vendor/assets/somepackage/phone.js #require phone
##プリプロセスとは？
一つのファイルに対し異なるフォーマットで処理をしていくことをプリプロセスという。
プリプロセスの順番は拡張子の右からになる。
例えば、projects.scss.erbというファイルの場合、右から、erb -> scss -> cssの順で処理される。
projects.coffee.erbであれば、erb -> coffee -> jsの順となる。
▼エラーになる例
projects.erb.scssだと、最初にscssで処理（プロセス）され次に、erbに渡されるが、scssで処理されたデータをerbが処理できないためエラーになる。
##マニュフェストファイル application.jsやapplication.cssをマニュフェストファイルよ呼ぶ。読み込むアセットファイルを記述する。記述した順番に読み込まれる。
##Sprockets（アセットパイプライン）は使わない？ Rails4まではアセットパイプラインが使われていたが、Rails5からは同じ目的（js, cssファイルのコンパイル）として、Webpackerが使われるようになった。
そしてRails6では完全にWebpakcerに移行している。