Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

MiddlemanとBower一緒に使う

More than 5 years have passed since last update.

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-sassfont-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-sassfont-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

osakanafish
🐟
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away