##Sassとアセットパイプライン
最近のRailsに追加された機能の中で最も特筆すべき機能の1つは、CSS、JavaScript、画像などの静的コンテンツの生産性と管理を大幅に強化する「アセットパイプライン
(Asset Pipeline)」
アセットパイプラインは、Webpackや、Yarn(のどちらともうまく動きます。
このセクションでは、アセットパイプラインの概要
と、素晴らしいCSS生成ツールである「Sass」の使い方
について説明します。
###アセットパイプライン
Rails開発者の視点からは、アセットディレクトリ
、マニフェストファイル
、プリプロセッサエンジン
という、3つの主要な機能が理解の対象となります。
#####アセットディレクトリ
app/assets
: 現在のアプリケーション固有のアセット
lib/assets
: あなたの開発チームによって作成されたライブラリ用のアセット
vendor/assets
: サードパーティのアセット(デフォルトでは存在しません)
$ ls app/assets/
config images stylesheets
取り上げたカスタムCSSが配置された場所と、その理由について理解することができる
と思います。つまり、custom.scssはサンプルアプリケーション固有のアセットなので、app/assets/stylesheetsに配置されていたのです。
####マニフェストファイル
静的ファイル(アセット)を上記の場所へそれぞれ配置すれば、マニフェストファイルを使って、それらをどのように1つのファイルにまとめるのかをRailsに指示することができます。
*= require_tree .
app/assets/stylesheetsディレクトリ(サブディレクトリを含む)中のすべてのCSSファイルが、アプリケーションCSSに含まれる
*= require_self
CSSの読み込みシーケンスの中で、application.css自身もその対象に含めています
#####プリプロセッサエンジン
必要なアセットをディレクトリに配置してまとめた後、Railsはさまざまなプリプロセッサエンジンを介してそれらを実行し、ブラウザに配信できるようにそれらをマニフェストファイルを用いて結合し、サイトテンプレート用に準備します
Railsはどのプリプロセッサを使うのかを、ファイル名の拡張子を使って判断します。
プリプロセッサエンジンは、繋げて実行する(chain)ことができます。
foobar.js.coffee
上の拡張子の場合、CoffeeScriptプロセッサ経由で実行されます。
foobar.js.erb.coffee
上の拡張子の場合は、CoffeeScriptとERbの両方で実行されます。
#####本番環境での効率性
アセットパイプラインの最大のメリットの1つは、本番のアプリケーションで効率的になるように最適化されたアセットも自動的に生成
機能を個別のファイルに分割し、(インデントを多用して)読みやすいフォーマットに整えていました。これは、プログラマにとっては便利な方法ですが、本番環境にとっては非効率
です。
最小化されていないCSSファイルを多数に分割すると、ページの読み込み時間が著しく遅くなる
から
(読み込み時間が長くなるとユーザー体験の質が下がる
ので、読み込み時間は重要な指標の1つです)
アセットパイプラインを使うと、この「開発効率と読み込み時間のどちらを重視するか」という問題について悩む必要がなくなります。
開発環境ではプログラマにとって読みやすいように整理しておき、本番環境ではAsset Pipelineを使ってファイルを最小化
すればよいのです
Asset Pipelineがすべてのスタイルシートを1つのCSSファイル(application.css)にまとめてくれます。
それらのファイルすべてに対して 不要な空白やインデントを取り除く処理を行い、ファイルサイズを最小化
してくれます
結果として、開発環境と本番環境という、2つの異なった状況に対してそれぞれ最高の環境を提供してくれます
感想
理解するのは難しい。