デザインテンプレートをgem化してRailsで使う

Asset Pipeline Rails Bootstrap WrapBootstrap Mountable Engine

WrapBootstrapというbootstarpベースの有料デザインテンプレートを配布してるところがあって、
それをrailsで使おうとしたらasset pipelineで割りとハマったのでそのメモ。

速習Asset Pipeline

本当はRails Guides読んだほうがいい

  • アセットを参照するとき app/assets/foo/bar や vendor/assets/foo/bar を参照するときは /assets/barになる (wrap bootstrapの場合、cssの中のurlをこの方式で書き換えないといけない)
  • application.cssやapplication.jsからコメントでrequireするときは bar になる

デザインテンプレートとか入れるときはvendorに入れるべきだと思うんだけど、vendor/assets にいれておけば app/assets にいれたのと同じ扱いになる。
stylesheetsとかjavascriptsがあるディレクトリにfontsとか置いても勝手に読み込まれる模様。

アセットをgemに切り出す

Gemify Assets for Railsが参考になる。
普通にgemを作るのと違うのは以下の2点。

  • Rails::Engineを定義する
  • gemのrootディレクトリにアセットをいれたvendorをもってくる

Rails::Engineというのはrailsアプリ内にサブrailsアプリを定義する機構で、Rails::Engineを定義することによりそのgemがサブrailsアプリとみなされてvendorが見えるようになる(らしい)。

定義するのは簡単で、bundle gem hogeした時点で

require "hoge/version"

module Hoge
  # Your code goes here...
end

ってなってるやつを

require "hoge/version"

module Hoge
  module Rails
    class Engine < ::Rails::Engine
    end
  end
end

にするだけでいい。

あとはrailsアプリのGemfileにgem "hoge"を追加するだけ。

wrap-bootstrap-rails作った

WrapBootstrapでgemを作る場合に関していうと、

  • css内のurlの書き換え作業がめんどい
  • 大量にcssやjsがあってどれを読みこめばいいかわからない。
  • asset pipelineはちょっと複雑なのでどうしても配置するときにミスが出てハマる。

これらをすべて解決するwrap-bootstrap-railsを作りました。

ダウンロードしてきたやつを解凍してきたディレクトリでwrapbr . hogeってやるとhogeって名前でカレントディレクトリにgemを作ってくれる。*1
加えて、html/index.htmlからどのcss/jsをrequireすればいいのかをREADMEに書いてくれる。
例: https://gist.github.com/k0kubun/d6d4d3565e62b49df31f

機会があればお使いください。

*1:有料のデザインテンプレートはrubygemsやgithubに上げないよう注意