アセットパイプライン_Railsチュートリアル5章より

Rails tutorialの第5章を終えました。
その時の気づいたこととか備忘録です。
今回はアセットパイプラインについて

railstutorial.jp

Sassとアセットパイプライン

Railsに追加された機能のなかにアセットパイプラインがあります
アセットパイプライン (Asset Pipeline)・・・CSS、JavaScript、画像などの静的コンテンツの生産性と管理を大幅に強化するです。

• アセットディレクトリ
• マニフェストファイル
• プリプロセッサエンジン

アセットディレクトリ

Railsのアセットパイプラインでは、静的ファイルを目的別に分類する、標準的な３つのディレクトリが使われています。

• app/assets: 現在のアプリケーション固有のアセット
• lib/assets: あなたの開発チームによって作成されたライブラリ用のアセット
• vendor/assets: サードパーティのアセット

この中にJSやCSSを格納するサブディレクトリが格納します。
例えばアプリ固有のscssはapp/assets/stylesheetに格納します

マニフェストファイル

静的ファイル (アセット(SCSSやJS等)) を上記の場所へそれぞれ配置すれば、マニフェストファイルを使って、それらをどのように1つのファイルにまとめるのかをRailsに指示することができます。

application.css

/*styleshetsディレクトリ内の全てCSSファイルがアプリケーションCSSに含めるようにする*/
 *= require_tree .
/*CSS読み込みの中でapplication.cssもその対象にします*/
 *= require_self 

application.cssのcssコメントである/**/の内にrequireの記載があるが、これはコメントではないです。

プリプロセッサエンジン

必要なアセットをディレクトリに配置してまとめた後、Railsはさまざまなプリプロセッサエンジンを介してそれらを実行し、ブラウザに配信できるようにそれらをマニフェストファイルを用いて結合し、サイトテンプレート用に準備します。

本番環境での効率性

開発環境と本番環境のソースの効率性については
開発環境ではプログラマにとって読みやすいように整理しておき、本番環境ではAsset Pipelineを使ってファイルを最小化すればよいです

Railsチュートリアルより

それを実現するために、Asset Pipelineがすべてのスタイルシートを1つのCSSファイル (application.css) にまとめ、すべてのJavaScriptファイルを1つのJSファイル (javascripts.js) にまとめてくれます。
さらに、それらのファイルすべてに対して 不要な空白やインデントを取り除く処理を行い、ファイルサイズを最小化してくれます。結果として、開発環境と本番環境という、2つの異なった状況に対してそれぞれ最高の環境を提供してくれます。