Fork me on GitHub

Sinatra-Assetpack

Gemを使ってインストールします。

gem install sinatra-assetpack

それからアプリケーションに読み込みます。

require 'sinatra/base'
require 'sinatra/assetpack'

class App < Sinatra::Base
  register Sinatra::AssetPack
  assets do
    # 読み込むファイル
  end

  # 残りの設定
end

標準のディレクトリ

デフォルト

もしCompassやFoundationのような開発ツールから生成されたCSSを使う予定がない場合は このシンプルな仕組みをプロジェクト毎に適用すべきです。そのまま Sinatra::Assertpackを加えるだけです。標準ではGemはあなたのアセットファイルをア プリケーションのルートにある“app”と呼ばれているフォルダへ格納します。

これは標準的な仕組みで、ほとんど特に設定しなくてもそのまま使えます。

app
  |- js/
       |- jquery.js
       |- app.js
  |- css/
       |- jqueryui.css
       |- reset.css
       |- foundation.sass
       |- app.sass
myapp.rb

重要なまとめ

  • この構造の場合は特に設定は要りません。ファイルパスは必要に応じて sinatra-assertpackで変更できます。

  • Sinatraが本来標準で使うpublicフォルダーは必要はありません。

  • .sassファイルはcssディレクトリへ行きます。これらはsinatra-assertpackが自 動で行ってくれます。その代わり、sassのGemをインストールして、require 'sass' を加える必要があります。

myapp.rbでは、asserts do .. endというブロックの中に、これらのパスを指定する 必要があります。

assets do

  js :application, [
    '/js/jquery.js',
    '/js/app.js'
    # 次のようにしても構いません: 'js/*.js'
  ]

  css :application, [
    '/css/jqueryui.css',
    '/css/reset.css',
    '/css/foundation.sass',
    '/css/app.sass'
   ]

  js_compression :jsmin
  css_compression :sass

end

jscssのメソッドを定義して、参照するシンボルであなたのビューでヘルパーとし て呼び出すことができます。上の例では次のように呼び出せます。

<%= css :application %>
<%= js :application %>

これらは次のコードとして生成されます。

<link rel="stylesheet" href="/css/application.css"/>
<script src="/js/application.js" type="text/javascript"></script>

これで完了です!

カスタムディレクトリ

レベル2

このアプリケーションの場合は先ほどとは異なるディレクトリ階層を持っています。

assets
  |- javascripts/
       |- jquery.js
       |- app.js
  |- stylesheets/
       |- jqueryui.css
       |- reset.css
       |- foundation.sass
       |- app.sass
myapp.rb

serveというメソッドはアセットを含むフォルダーをGemに指定するためのものです。

assets do

    serve '/js', :from => 'assets/javascripts'
    js :application, [
      '/js/jquery.js',
      '/js/app.js'
      # 次のようにしても構いません: 'js/*.js'
    ]
    
    serve '/css', :from => 'assets/stylesheets'
    css :application, [
      '/css/jqueryui.css',
      '/css/reset.css',
      '/css/foundation.sass',
      '/css/app.sass'
     ]
    
    js_compression :jsmin
    css_compression :sass
  end

ヘルパーは先ほどと同様に呼び出します。

FoundationとCompass

Level Awesome

先ほどの章では決められた数のアセットが扱われていました。でももし、あなたのベンダ ーのアセットが特定の順に読む場合はどうすればよいでしょうか。

この章ではFoundationというフレームワークをsinatra-assertpackで使う方法を扱いま す。このサンプルはcompassと、zurb-foundationのGemを扱います。

gem install zurb-foundation
gem install compass

ここではすべてを網羅しませんが、Zurb-foundationのリンクを後ほどの章で参照してく ださい。

生成されたディレクトリです。

├── javascripts
│   ├── foundation
│   │   ├── foundation.alerts.js
│   │   ├── foundation.clearing.js
│   │   ├── foundation.cookie.js
│   │   ├── foundation.dropdown.js
│   │   ├── foundation.forms.js
│   │   ├── foundation.joyride.js
│   │   ├── foundation.js
│   │   ├── foundation.magellan.js
│   │   ├── foundation.orbit.js
│   │   ├── foundation.placeholder.js
│   │   ├── foundation.reveal.js
│   │   ├── foundation.section.js
│   │   ├── foundation.tooltips.js
│   │   └── foundation.topbar.js
│   └── vendor
│       ├── custom.modernizr.js
│       ├── jquery.js
│       └── zepto.js
|   |__ app.js
├── sass
│   ├── _settings.scss
│   ├── app.scss
│   └── normalize.scss
└── stylesheets
|   ├── app.css
|   └── normalize.css
myapp.rb

このアプリケーションではcompass watchによって.scssが変更される度にコンパイル されるために.sass.cssのファイルが存在しています。つまり、ここでは変換を無 視させなければなりません。集結しているファイルの設定は大抵アプリケーションのファ イルにあります。

今回のケースでは、JSファイルの順番が次のような具合で必要です。

  1. ベンダーのJSファイルはjQuery、Modernizr、そしてZepto

  2. foundation.*.jsのようなFoundationのプロトタイプをすべて含んだ “foundation.js”ファイル

  3. foundation.*.jsのファイル

これらの変更が異なる場合はエラーが表示される可能性があるかもしれません。

assets do
  serve '/js', :from => 'javascripts'

  js :foundation, [
    '/js/foundation/foundation.js',
    '/js/foundation/foundation.*.js'
  ]

  js :application, [
    '/js/vendor/*.js',
    '/js/app.js'
  ]
  
  serve '/css', :from => 'stylesheets'
  css :application, [
    '/css/normalize.css',
    '/css/app.css'
   ]
  
  js_compression :jsmin
  css_compression :sass
end

ビューの中身

<%= css :application %>
<%= js :application %>
<%= js :foundation %>

これによって、特定の順番が保たれているので、必要なファイルが正しく読み込まれ、 “no JS errors”とブラウザのコンソールに表示されるはずです。

連結

もし、上記のコードを試してもうまく行かない場合、連結しない状態でブラウザに読み込 まれているかもしれません。この状況はdevelopmentモードの時にのみ起こりうります。 Rackの環境変数をproductionに変更してください。

export RACK_ENV="production"

これでアセットは正しく“application.css”と“application.js”、そして“foundation.js” のみが表示されるようになったはずです。

プリコンパイル

続いては、連結と圧縮をサーバーに公開させる度に行う方法です。この方法はサーバーに プッシュした時に一度しか使うことができませんが、もしそれでもコンパイルから圧縮と アセットの連結を行いたい場合はRakeタスクをGemから読み込ませましょう。

Rakefileをアプリケーションのあるディレクトリに作り、以下の内容を加えます。

APP_FILE  = 'app.rb'
APP_CLASS = 'Sinatra::Application'

require 'sinatra/assetpack/rake'

そして、rake assertpack:buildを実行すればpublicディレクトリへ自動的に生成し ます。

資料(英語)

Top