Bowerとmiddlemanの統合

bower js middleman

設定

基本的にはrailsとの統合と同様に.bowerrcとcomponent.jsonを用意。

.bowerrc

{
  "directory" : "vendor/components",
  "json"      : "component.json"
}

component.json

{
  "name": "middleman-app.js",
  "version": "0.0.0",
  "dependencies": {
    "bootstrap": null
  }
}

middlemanとの統合の際のポイントはconfig.rbの設定。

config.rb

set :css_dir, 'assets/stylesheets'
set :js_dir, 'assets/javascripts'
set :images_dir, 'assets/images'
set :bower_dir, '../vendor/components'

config.rbで:bower_dirオプションが指定できるようになりました。
このオプションにbowerでインストールしたファイルの保存ディレクトリを登録する事が出来ます。
ディレクトリの指定方法は, sourceディレクトリからの相対パスになります。

記事はarticle以下に
js, css, imageはassets以下にまとめました。

├── Gemfile
├── Gemfile.lock
├── component.json
├── config.rb
├── source
│   ├── article
│   ├── assets
│   ├── calendar.html.haml
│   ├── feed.xml.builder
│   ├── index.html.haml
│   ├── layouts
│   └── tag.html.haml
└── vendor
    ├── bundle
    └── components

all.css.sass

//= require 'bootstrap/dist/css/bootstrap.min.css'

all.js.cofee

#= require "jquery"

注意

注意点としてはbowerで管理するファイルをsource以下にしないこと。
sourceディレクトリ以下にした場合、build対象となるため出力ファイルが大きく増加し、ビルドの時間も増えてしまいます。