まずアセット(asset)とは
JavaScriptコードやスタイルシート、画像などアプリで扱うソース一式の総称
アセットパイプラインとは
自分達が書いたCSSやJavaScript、画像などのリソース(asset)を効率的に扱うための仕組み。
sprockets-railsというgemにて提供されているSprockets機能を使い、ブラウザが読み取れる形式で、実行速度が速く、ブラウザキャッシュ(データを取り出しやすい状態にしておくこと)に対して最適化すること。
アセットパイプラインの処理の流れ
1. 高級言語のコンパイル
CoffeeScript(JavaScriptコードを書くのが楽になる高級言語)、SCSS(cssを書くのが楽になるsassの記法の一つ。)、ERB、Slim(ERBよりスッキリした記述のテンプレートエンジン)等で記述されたコードをコンパイルして、ブラウザが認識できるJavaScript、CSSファイルにする。
2. アセットの連結
複数のJavaScript、CSSファイルを一つのファイル(application.jsやapplication.css)に連結することで、読み込みに必要となるリクエスト数を減らし、読み込みの時間を短縮する。
3. アセットの最小化
スペーズ、改行、コメントを削除して、ファイルを最小化し、通信量を節約する。
4. ダイジェストの付与
コードの内容からハッシュ値(ダイジェスト)を算出してファイル名の末尾に付与する。これによってコードが変更されればファイル名が変更されるため、ブラウザのキャッシュの影響で修正が反映されないという問題を防ぐことができる。
Railsでcssとjavascriptを読み込ませる
Railsで読み込む方法としてヘルパーメソッド（stylesheet_link_tag, javascript_include_tag）を使う。
= stylesheet_link_tag 'application', media: 'all', 'data-turbolink': 'reload'
= javascript_include_tag 'application', 'data-turbolinks-track': 'reload'
マニフェストファイルを作成し、各ファイルを連結する
マニフェストファイルとは読み込みたいアセットのリスト一覧のこと。具体的にどのソースコード同士を連結するのかをマニフェストファイルにあらかじめ記述しておくしておく必要がある。
Railsにはデフォルトで下記のマニフェストが用意されています。
・/app/assets/javascripts/applications.js
・/app/assets/stylesheets/applications.css
マニフェストを定義する
Sprocketsを利用するにはまずマニフェストを記述しておく必要がある。マニフェストファイルに連結したいファイルを記述する。
//= require jquery
//= require_tree.
/*
*= require_tree
*= require responsive.css
*/
マニフェストの定義はそれぞれコメントの配下にJavaScriptは「//= require」、
cssは「/* *= require */」の形式で表す。
・require... 指定したファイルを記述した位置に取り込む。
・require_tree... 指定されたディレクトリ配下の全ファイルの内容を統合し、記述した位置に取り込む。