MiddlemanとBower一緒に使う

Middleman, 便利だけど
サードパーティ製のコンポーネントはgemじゃなくてBowerで管理したいなって気持ちの時に

Bowerの設定

Middlemanで新しいプロジェクト作って
プロジェクトディレクトリに移動する

middleman init [Project Name]
cd [Project Name]

Bowerの初期設定をする
色々聞かれると思いますが適当に

bower init

initが終わったらbower.jsonというファイルができる

続いて.bowerrcというファイルを作って
コンポーネントをどのディレクトリにインストールするか設定する

touch .bowerrc

.bowerrc

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

directoryはそれぞれ好みで設定する
.bowerrcで特に指定しない場合、
インストールディレクトリはbower_componentsというところになる

config.rb

MiddlemanでBowerで管理しているコンポーネントディレクトリ以下を
読むようにするための設定をconfig.rbに追記

config.rb

after_configuration do
  bowerrc = JSON.parse File.read(File.join "#{root}", '.bowerrc')
  bower_dir = bowerrc['directory']
  sprockets.append_path File.join("#{root}", bower_dir)
end

フォントファイル問題

Middlemanのドキュメントによると
Bower使う場合は上記のようにsprockets.append_pathしてね、ということらしいけれど
この記述だけだとbootstrap-sassやfont-awesomeのフォントファイル（.ttfや.woffなど）を
読み込んでくれないみたい

対策としてフォントファイルがある場所を直接append_pathするといいみたいなので
パターンマッチでコンポーネントディレクトリ以下の
bower.json,component.json,.bower.jsonを探して
mainに記述されているファイルのディレクトリを
append_pathすることにした

config.rb

after_configuration do
  bowerrc = JSON.parse File.read(File.join "#{root}", '.bowerrc')
  bower_dir = bowerrc['directory']
  sprockets.append_path File.join("#{root}", bower_dir)

  Dir.glob File.join "#{root}", bower_dir, '**/*', '{bower,component,.bower}.json' do |f|
    bower = JSON.parse File.read(f), create_additions: false
    dirname = File.dirname f
    case bower['main']
    when String
      sprockets.append_path File.dirname(File.join(dirname, bower['main']))
    when Array
      bower['main'].each do |name|
        sprockets.append_path File.dirname(File.join(dirname, name))
      end
    end
  end
end

この辺りに関してはいろいろやり方があるみたいで
これがベストかどうかわからないけれど
とりあえずこれでbootstrap-sassやfont-awesomeのフォントファイルが参照できるようになった

参考

http://middlemanapp.com/jp/basics/asset-pipeline/
https://github.com/sstephenson/sprockets/blob/master/lib/sprockets/bower.rb#L43-L54
https://github.com/bower/json/blob/0.4.0/lib/json.js#L7
https://github.com/twbs/bootstrap-sass/issues/592