SinatraでAsset Pipelineするならsinatra-asset-pipelineが便利 #Ruby

Sinatraで作るような簡単なWebアプリでも、SassやCoffeeScriptを使ったりCSS・JSを圧縮したいときはよくある。そのときはsinatra-asset-pipelineが便利。

最初はsinatra-assetpackを試したが、

パイプラインシステムが独自実装であるため記述が独特
Herokuへのデプロイ(precompile)がうまくできなかった

のでsinatra-asset-pipelineに切り替えた。こちらの利点は、

Sprocketsを使っており、使い慣れたRailsと同じように利用できる
- Railsと同様Herokuにデプロイしたらrake assets:precompileが走り、圧縮された静的ファイルを配信可能
ほぼSprocketsのラッパーなのでライブラリが薄い
- 挙動を把握しやすい
- Sprocketsを直接使う方法にもすぐ移行可能

使用方法

READMEの通りにやればすぐ動く。CSS・JavaScriptの読込設定もRailsと同じなので楽ちん

自分は以下のように設定した。

Gemfile

source 'https://rubygems.org'
source 'https://rails-assets.org'

gem 'sinatra', require: 'sinatra/base'
# Bundlerで自動requireできるように
gem 'sinatra-asset-pipeline', require: 'sinatra/asset_pipeline'
# JavaScriptの圧縮に必要
gem 'uglifier'

gem 'compass'

# Rails Assets
gem 'rails-assets-normalize.css'

Rails AssetsにRails以外からも使いやすくする変更が入っていたので、Rails Assetsからも読み込めるようにした。

app.rb

ENV['RACK_ENV'] ||= 'development'
require 'bundler/setup'
# `Bundler.require`で自動requireする
Bundler.require(:default, ENV['RACK_ENV'])

class App < Sinatra::Base
  configure do
    # Railsのデフォルトに合わせ、application.js/cssが生成されるように設定
    set :assets_precompile, %w(application.js application.css *.png *.jpg *.svg *.eot *.ttf *.woff)
    # CSS・JSを圧縮する
    set :assets_css_compressor, :sass
    set :assets_js_compressor, :uglifier
    register Sinatra::AssetPipeline

    # Rails Assetsに対応
    if defined?(RailsAssets)
      RailsAssets.load_paths.each { |path| settings.sprockets.append_path(path) }
    end
  end

  get '/' do
    erb :index
  end
end

ビューヘルパーはsprockets-helpersが提供している。

views/layout.erb

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>test</title>
    <%= stylesheet_tag 'application' %>
  </head>
  <body>

<%= yield %>

    <%= javascript_tag 'application' %>
  </body>
</html>

デフォルトではassets、vendor/assets以下のフォルダがアセットの保存パスとして扱われる。

mkdir -p assets/js assets/css assets/img

あとはRailsと同様、application.js/cssにSprocketsの読込設定を書いていけばいい。

assets/js/application.js

// 例)
//= require jquery
//= require_tree .

assets/css/application.css.sass

// 例)
@import compass
@import variables
@import mixins
@import normalize
@import main

Rakeタスクを定義しておけばHerokuへのデプロイ時に自動でrake assets:precompileが走る。

Rakefile

require_relative 'app'

require 'sinatra/asset_pipeline/task'
Sinatra::AssetPipeline::Task.define! App

$ git push heroku master
...
-----> Ruby app detected
-----> Compiling Ruby/Rack
-----> Using Ruby version: ruby-2.1.3
-----> Installing dependencies using 1.6.3
...
-----> Precompiling assets
       Running: rake assets:precompile
       Asset precompilation completed (10.53s)

-----> Discovering process types
       Procfile declares types -> web
       Default types for Ruby  -> console, rake

-----> Compressing... done, 23.3MB
-----> Launching... done, v30
       http://***.herokuapp.com/ deployed to Heroku