zackey推し

プログラミングとか色々書いてきます

【Rails】【備忘録】アセットパイプラインのこと

はじめに

Railsチュートリアルの5章を進めていく中で、
Railsに触れていないとアセットパイプラインあたりのこと忘れてしまいそうなので、
備忘録として概要をブログに記述します。

railstutorial.jp

備忘録

アセットディレクト

静的ファイルを目的別に分類するディレクトリ。
以下デフォルト3つ。

  • app/assets:アプリケーション用
  • lib/assets:ライブラリ用
  • vendor/assetsサードパーティ

主に画像、JavaScriptCSSのサブディレクトリが用意されている。

マニフェストファイル

アセット(※)ファイルを1つのファイルにまとめる指示を記述する。
実際に処理を実施するのは、「Sprockets」と呼ばれるgem。

※ JavaScriptCSSのみ

rails new 〜した際に作成される、 〜/app/assets/stylesheets/application.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
 */

上記のうち、以下の記述が記述内容に相当する。

  • *= require_tree .
  • *= require_self

プリプロセッサエンジン

マニフェストファイルを読み取って、
アセットファイルをくっつけてくれるやつ・・・
って解釈であっているかな・・・?

おわり(ざっくりとした解釈)

んん...とりあえず特徴まとめたけど、
簡単な一言二言ぐらいに凝縮して腹落ちさせておきたい。

なんで、とりあえず以下で覚えておくこととします。

  • アセットパイプラインはデプロイ(てか実行時)にJS,CSSを最適化してくれるやつ
  • 勝手にバンドル(最小化って言えばいいかな)もしてくれるやつ

詳しいことは以下読んだ方がRailsチュートリアルより腹落ちしますね。
(ありがたく星つけさせていただきました。)

rails.hatenadiary.jp

いわゆるこれが最近はやりのWebpackとかに置き換えられているのかな・・・?
このあたりはまだまだ調べないとあかんな・・・

以上です〜