shiki0331’s blog

Web Developer. TypeScript / React.js を中心に学んでいます。 ブログ内容で間違っている箇所などありましたら、ご指摘していただけると助かります。

〜15分チャレンジ〜 AssetsPipelineとは?

15分チャレンジとは15分で、あるお題を調べてブログに書くことです。

なので内容は薄いのでご了承ください、、笑

 


アセットパイプラインとは、JSやCSSのデータを限りなく小さくして連結する。それ以外にも画像などの静的ファイルも最小化してくれる。

ex).js形式のファイルをapplication.jsに.css形式のファイルをapplication.cssにまとめる。

 

連結することでリクエスト数を減らし、ブラウザの読み込みが早くなる。

また、SASSやCofeeScriptを読み込めるようにCSSやJSに変化してくれる。

 

railsではアセットパイプラインの機能がsprockets-rails gemで実装されていて、デフォルトで有効になっている。

sprockets-railsは圧縮する際に下記のgemも使用している。

gem 'sass-rails' //sassファイルをcssに
gem 'uglifier'   //javascript軽量化
gem 'coffee-rails'  //coffeeファイルをjsに

app/assetsディレクトリがアセットの置き場所

rails newで作られるassetsは下記の3つ。

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

 

application.cssやapplication.jsにどうやってコンパイルするか指示を書く必要がある。

ex)*= require_tree .

 

production環境では自動でコンパイルが行われないので設定する必要がある。

手動で行うこともできる。

 

やってみて

15分で調べて書くのはかなり大変でした笑

けど楽しかったのでアウトプットがてらにやっていこうかなと思います。

 

下記は参考にしたサイトです。

アセットパイプライン - Rails ガイド

アセットパイプライン - Qiita

railsのアセットパイプラインについて解説する - Qiita