Assetとは
RailsにはJavaScriptやCSS、Imageなどの要素をアセットと呼びます。アセットはそれぞれに ‘app/assets/javascripts/'、 'app/assets/stylesheets/'、 'app/assets/images’ フォルダーで管理します。 Railsは基本的にJavaScriptとCSSの拡張言語のCoffeeScriptとSCSSを提供します。
Asset Pipelineとは
JavaScriptやCSS、Imageなどのアセットを最小化(minify)または圧縮して連結するフレイムワーク
Asset Pipelineの役割
1.アセットファイルのパスの管理
2.アセットのコンパイル
3.アセットの依存関係の整理
アセットファイルのパスの管理
Assetsの中のパスの管理をします。
/assets/javascript/user.js /assets/stylesheet/user.css |
というファイルを
/assets/user.js /assets/user.css |
のように1つのディレクトリで管理されているようにアクセスさせてくれます。
アセットのコンパイル
Javascript、CSSのかわりに、CoffeeScript、SCSSを使うことも多いと思います。browserはCoffeeScriptとSCSSを読めないのでCoffeeScriptとSCSSをJavaScriptとCSSにコンパイルしなきゃいけないです。このように、ファイルを適当な形式に変換してくれる機能をAsset Pipelineと言います。
必要となるgemは以下です。
gem 'sprockets' gem 'coffee_script' gem 'scss' |
sprockets
Asset Pipelineの基盤の機能を提供してくれます。
coffee_script && scss
それぞれCoffeeScript、SCSSを使うためです。
アセットの依存関係の整理
Asset間の依存関係を整理します。このようにファイルの読み込みの順番を管理します。他のファイルに影響を与えないためにコメントアウトの形式で書きます。
app/assets/javascript/application.js
// = require jquery // = require jquery_ujs // = require_tree. |
Railsのアプリケーションでは複数のCSS、Javascriptを1つのファイルにまとめて提供することが主流となっています。それは複数ファイルが存在すればリクエストの数が増えてページの読み込みが遅くなるからです。アプリケーションの内の依存関係をまとめて提供するための仲介になるファイルを「manifest file」と呼び、デフォルトでは application.js、application.css になります。
Asset Pipelineをコントロールする
develpment/productionの設定
設定は/config/environments/ファイルに書きます。
config.assets.js_compressor
Javascriptの圧縮ライブラリの設定。productionではuglifierというgemを利用しているが nilの設定にして無効にすることも出来る。 default設定 development: nil production: :uglifier
config.assets.css_compressor
CSSの圧縮ライブラリの設定。 default設定 development: nil production: :uglifier
config.assets.compile
動的にcompileするかの設定。trueだとprecompileしていないファイルを動的にコンパイルするのでproductionではfalseが良さそうです。 default設定 development: true production: false
config.assets.digest
pipelineを通した後のファイルにつく数字をつけるかどうかです。 default設定 development: false production: true
config.assets.debug
debugするかの設定。 default設定 development: true production: false
precompileの設定
config/initializers/asset.rb
# Precompile additional assets. # application.js, application.css, and all non-JS / CSS in app / assets folder are already added. # Rails.application.config.assets.precompile + = % w (search.js) Rails . application . config . assets . precompile + = % w (* .js * application.css) | cs |
Asset Pipelineの流れ
production
例えば、下記設定の場合。
/config/environments/production.rb
config . assets . js_compressor = : uglifier config . assets . css_compressor = : sass config . assets . compile = false config . assets . digest = true # config.assets.debug = false |
1.assetにあるソースコードをコンパイル(coffee -> js、 scss -> css)
2.コンパイルしたソースコードを合わせる (複数のファイルのコードをまとめる）
3.ファイルを圧縮する（uglifier、sass)
4.ファイルにダイジェストを付与する（ファイル名につくハッシュ)
これでブラウザに送られます。
development
例えば、下記設定の場合。
# config.assets.js_compressor = nil # config.assets.css_compressor = nil # config.assets.compile = true config . assets . digest = false config . assets . debug = true |
1.assetにあるソースコードをコンパイル(coffee -> js、 scss -> css)
これだけでブラウザへ送られます。