Webアプリのモックアップ作業土台を作る その2 Sprockets

ruby sinatra web

前回のつづき。

前回作った作業台に Sprockets を導入して assets 提供を分離します。といっても Sprockets 使っていくかどうか自分でも確信持ててないのでリポジトリではブランチにしておきました。

Sprockets を導入するメリットとしては、このままデプロイするケースを視野に入れたときに圧縮機能を追加しやすかったりプリコンパイルできたりするところでしょうか（どちらも今回はやってません）。

というわけで、まずは Gemfile に sprockets 関連の gem を追加して bundle。

gem 'sprockets'
gem 'sprockets-helpers'
gem 'sprockets-sass'

ディレクトリ構成を変更

前回の最後では以下のようなディレクトリ構成でした。*.sass と *.coffee は views に入ってました。

workbench
├── config.ru
├── public
│   └── js
│       └── vendor
├── views
│   ├── _side.slim
│   ├── application.coffee
│   ├── application.sass
│   ├── index.slim
│   └── layout.slim
└── workbench.rb

今回は assets ディレクトリを作成して *.sass と *.coffee をまとめ、拡張子も二重拡張子に変更。また bower で js パッケージをインストールするディレクトリも assets/js/vendor に変更してます。

workbench
├── assets
│   ├── css
│   │ └── application.css.sass
│   └── js
│       ├── application.js.coffee
│       └── vendor
├── config.ru
├── public
├── views
│   ├── _side.slim
│   ├── index.slim
│   └── layout.slim
└── workbench.rb

bower の設定を変更

.bowerrc で js パッケージ保存位置を変更。

{
  "directory": "assets/js/vendor"
}

以前の public/js/vendor は削除して改めて bower install。

assets/js/application.js.coffee も新しいレイアウトに合わせる。Sprockets の //= require を使います。

//= require 'js/vendor/requirejs/require'

require.config
  paths:
    jquery: '/assets/js/vendor/jquery/jquery'

require ['jquery']

Sinatra に Sprockets 関連設定を追加

workbench.rb はけっこうたくさん変更。configure ブロックに Sprockets の設定をいろいろ書いて、/css と /js へのリクエストの処理は削除。

# ...
require 'sprockets'
require 'sprockets-helpers'
require 'sprockets-sass'

class Workbench < Sinatra::Base
  set :root, File.dirname(__FILE__)
  set :sprockets, Sprockets::Environment.new(settings.root)
  set :sprockets_prefix, '/assets'
  set :digest_assets, false

  configure do
    Sprockets::Helpers.configure do |config|
      config.environment = settings.sprockets
      config.prefix      = settings.sprockets_prefix
      config.public_path = '/public'
    end

    Sprockets::Sass.add_sass_functions = true

    sprockets.append_path './assets'

    set :haml, { format: :html5 }
    set :views, './views'
  end

  configure :development do
    register Sinatra::Reloader

    Sprockets::Helpers.configure do |config|
      # Debug mode automatically sets
      # expand = true, digest = false, manifest = false
      config.debug = true
    end
  end

  get '/' do
    @title = 'Index'
    slim :index
  end
end

config.ru で /assets 以下のリクエスト処理を Sprockets に任せる。

require 'bundler'
Bundler.setup

require 'rack-livereload'
use Rack::LiveReload

require File.expand_path(File.join('..','workbench'), __FILE__)

map Workbench.sprockets_prefix do
  run Workbench.sprockets
end

map '/' do
  run Workbench
end

views/layout.slim の css と js の読み込みパスを assets 下に変更。

    link href="/assets/css/application.css" rel="stylesheet"
      script src="/assets/js/application.js"

Guardfile の guard-livereload 監視対象に assets 配下を追加。

guard 'livereload' do
  watch(%r{views/.+\.(erb|haml|slim|s[ac]ss|coffee)$})
  watch(%r{assets/css/.+\.css\.s[ac]ss$})
  watch(%r{assets/js/.+\.js\.coffee$})
end
</code>

参考

つづき