はじめに
ruby on rails チュートリアルを学習中
初学者
アセットパイプラインとは
簡単に言えば複数のファイルを一つにまとめるための機能
scssを最終的に1つのcssにまとめる等
今では多くの言語でファイルをバンドルしているが、ruby on railsにアセットパイプラインが追加されたのをきっかけに
多くの言語やFWで取り入れられたらしい。
Railsでのアセットパイプライン
理解するべきこと3つ
- アセットディレクトリ
- マニフェストファイル
- プリプロセッサエンジン
アセットディレクトリ
アセット(画像やcss(scss))の置き場所
railsの場合app/assetsにstylesheetsやimagesディレクトリがある
sample.svgを保存する場合
app/assets/images/sample.svgとなる
画像やcssの置き場所を固定することで、開発者間での違いをなくすことができ、開発効率や保守性を上げることができる
マニフェストファイル
静的ファイル(アセット)をどのように1つのファイルにまとめるのかをRailsに指示する。
実際に1つのファイルにまとめる処理を行うのはSprocketsというgem
app/stylesheets/application.cssはアプリケーション固有のCSS用マニフェストファイル
/*
* This is a manifest file that'll be compiled into application.css, which will
* include all the files listed below.
*
* Any CSS and SCSS file within this directory, lib/assets/stylesheets, or any
* plugin's vendor/assets/stylesheets directory can be referenced here using a
* relative path.
*
* You're free to add application-wide styles to this file and they'll appear at
* the bottom of the compiled file so the styles you add here take precedence
* over styles defined in any other CSS/SCSS files in this directory. Styles in
* this file should be added after the last require_* statement.
* It is generally better to create a new file per style scope.
*
*= require_tree .
*= require_self
*/
プリプロセッサエンジン
アセットに対してプリプロセッサエンジンを介して様々な処理を実行し、ブラウザに配信できるよう結合する
erbに対する処理
scssに対する処理など
3つまとめて
- アセットディレクトリ
- マニフェストファイル
- プリプロセッサエンジン
の3つが影響しあってアセットパイプラインは実現されている
基本的にはアセットディレクトリにアセットを追加すればrailsがよしなに処理をしてくれる