WIP

sprocketについて

2017年09月11日に更新 vsanna / public Rails

基本的な仕組み

Sprockets: パス管理

基本的な仕組みと役割

  • rackベース
  • アセットファイルにアクセスするためのパス管理

たとえば以下のディレクトリにjsとcssを分けて管理していたとする

  • /assets/js/*.js
  • /assets/css/*.css

これらに対し、以下のconfig.ruでの設定を与えると、/assets/*.js/assets/*.cssなどでアセットにアクセス可能になる

つまり、アセットファイルの配置パスを管理して、一つのディレクトリにあるかのようにアクセスする機能を提供している

config.ru

require 'sprockets'

map '/assets' do
  environment = Sprocket::Environment.new
  environment.append_path = '/assets/js'
  environment.append_path = '/assets/css'
  run environment
end

config/application.rb: パスの追加

Railsではデフォルトで幾つかのパスがSprocketに登録されている

  • app/assets
  • lib/assets
  • vendor/assets

これについかで登録するにはconfig/application.rbに追加する

class Application < Rails::Application
  config.assets.path << Rails.root.join("components")
  # Railsプロジェクト直下のディレクトリを追加
  # Rails.root.class #=> Pathname
  # Rails.root.join('hoge', 'fuga', 'geho') #=> #<Pathname:/Users/ishikawa/howTV/liiga_quiz/hoge/huga/geho>
end

コンパイル

Sprocketはcoffee scriptやsassのコンパイルも担う

(therubyracerがcoffeeを変換するjs実行環境を提供)

[1] パスを管理し, [2] 変換して返却する仕組みをAsset Pipelineと呼ぶ

変換処理の順番は拡張子で指定.末端から処理

# shout.js.coffee.erb

<%= w(joker wilnet onk sugamosao udzura).each do |name|>
  shoutTo<%= name.capitalize %> = ->
    alert("Hellooooooooooo <%= name %>!!")
<% end %>

依存性の管理

Sprocketはファイルの読込順も管理する

具体的には、マニフェストにディレクティブというコメントのような記法で読込順を指定することができる

ディレクティブの種類

  • require ... 自身より前に読込. 一度だけ読込する
  • include ... require同様. 何度でも読み込みできる
  • require_directory ...
  • require_tree
  • require_self
  • depend_on
  • depend_on_asset
  • stub

一括読込と分割読込

developmentとproductionでassetの読み込み方を変えられる

devでは各ファイルを結合せずに読込、prodだと結合して読み込む

その設定はconfig/environments/development.rbにおいて

  config.assets.debug = true

とすることで分割読込を指定している

プリコンパイル

通常sprocketはアクセスが来るたびにコンパイルしているが、本番でそれは非効率なのであらかじめプリコンパイルして一つのファイルに結合した物を用意しておく。

$ rake assets:precompile #=> public/assets/配下に配置される

そのため、デプロイ過程に上記コマンドを打ち込む必要がある

機能ごとにコンパイルするファイルを分ける

たとえばservice, client, adminでアセットを使い分けたいときはマニフェストファイルをそれだけ用意する必要がある

1. まずconfig/production.rbにプリコンパイル対象であるマニフェストファイルを追加する

config.assets.precompile += %w(client.js)

なお、全般に反映させるのであればconfig/initializers/assets.rbに書くのが一般的

2. レイアウトを増やす

# controller
HogeController < ApplicationController
  layout: 'client'
end

# view
# client.html.erbを作成しheadタグ内書き換え

<%= stylesheet_link_tag 'client', media: 'all', 'data-turbolinks-track': true%>
<%= javascript_include_tag 'client', 'data-turbolinks-track': true%>

Turbolinks

Pjaxを簡単に利用できる仕組み

  • Pjaxとは
    • js, cssに変化がないならタイトルとbodyレンダリングを高速化する技術
  • turbolinksの動き
    1. ページ内のクリックイベントを補足し、それがaタグに対する者だればturbolinks発動
    2. turbolinksはajaxでページ情報をリクエスト
    3. 取得したhtmlのhead内を見て、同じアセットであればそのまま、違うアセットが帰ってきたらlocation.hrefを書き換えてリダイレクト
    4. 同じアセットが来ていた場合はページ内容のtitle, bodyを書き換えた後にwindow.histroy.pushStateを実行

基本的にはやっかいな記述なので、application.jsからrequire turbolinksを削除し、またgemfileからも削除するのがオススメ

shareシェアする

forumコメント

まだコメントはありません!
ログインしてコメントを残す
{{comment.user.name}} on {{commentCreatedAt()}}

content_copy前後のイシュー

{{message}}