,

[Middleman 3] Middleman: Bower をつかってみる

公開日: 2014/05/23
更新日: 2018/12/03

なんとなく整理ができたので、リライトしてまとめておきます。
（2014/10/06）

[markdown]
“`prettyprinted
% middleman version
Middleman 3.3.6
“`

> * [Middleman: Asset Pipeline | deadwood](https://www.d-wood.com/blog/2014/10/14_7026.html)

## Bower

### インストール

Bower がインストールされていなければ、下記でインストールします。

“`prettyprinted
% npm install -g bower
“`

npm も必要な場合は下記あたりで。

> * [Node.js: Homebrew で node.js をインストールする | deadwood](https://www.d-wood.com/blog/2014/03/21_5852.html)
> * [Node.js: nodebrew で node.js をインストールする | deadwood](https://www.d-wood.com/blog/2013/10/30_4963.html)

次にこのプロジェクトで Bower を使うよと init します。

bower.json というファイルが作成されます。

“`prettyprinted
% bower init
“`

いろいろ聞かれますが、利用するだけならすべてリターン＆イエスで進めて大丈夫です。
bower.json まわりの内容は、こんな感じです。

> * [Bower: JavaScript も CSS もまとめて管理する | deadwood](https://www.d-wood.com/blog/2013/11/10_5009.html)

### .bowerrc を作成する

パッケージのインストールディレクトリと設定ファイルを定義しておきます。

“`json
{
“directory”: “bower_components”,
“json”: “bower.json”
}
“`

### パッケージをインストールする

bower.json に設定を書き込んでくれる `–save-dev` オプションを付けて実行します。
[Bootstrap 3](http://getbootstrap.com/) と [Lightbox 2](http://lokeshdhakar.com/projects/lightbox2/) をインストールしてみます。

“`prettyprinted
% bower install –save-dev jquery
% bower install –save-dev bootstrap
% bower install –save-dev lightbox2
“`

Bootstrap には、JavaScript, css, font が含まれます。
Lightbox には、JavaScript, css, img が含まれます。
どちらも jQuery が必要です。
bower_components というディレクトリに入ります。

## Sprockets にパスを追加する

Middleman には、下記のパスが参照できるようになっています。

* source/js
* source/css
* source/fonts
* source/img

“`ruby:config.rb
config[:js_dir] = ‘js’
config[:css_dir] = ‘css’
config[:fonts_dir] = ‘fonts’
config[:images_dir] = ‘img’
“`

ここに展開されているファイルであれば、下記のような形で呼び出すことができるようになります。

“`
//= require “foo.js”
“`

bower_components 以下を呼び出せるように、Sprockets にパスを追加します。

“`ruby:config.rb
# Bower configuration
ready do
sprockets.append_path “#{root}/bower_components”
end
“`

> * [sprockets – Middlemanの中でbowerを使う – Qiita](http://qiita.com/yterajima/items/48ba70d6290850186fb5)
> * [Using Bower with Middleman – James Pearson, Ruby on Rails web developer](http://fearmediocrity.co.uk/2014/01/25/using_bower_with_middleman/)

それぞれ必要な CSS, JavaScript, Fonts, Images を呼び出していきます。

### 追記（2014/10/17）

sprockets.append_path をした状態で、asset gem の bootstrap-sass をあわせて利用したところ、build 時に LoadError が発生しました。
解決できず。

## JavaScript

main.js に読み込みます。

“`javascript:main.js
//= require “jquery/dist/jquery.min.js”
//= require “bootstrap/dist/js/bootstrap.min.js”
//= require “lightbox2/js/lightbox.min.js”
“`

## CSS

同じ形式で main.scss に読み込みます。

“`css:main.scss
//= require “bootstrap/dist/css/bootstrap.min.css”
//= require “lightbox2/css/lightbox.css”
“`

以下ダメな例。
SASS を利用しているので `@import` できるようにしたいのでこんなことをやってみました。

“`ruby:config.rb
compass_config do |config|
add_import_path = “/Users/****/projects/middleman-h5bp/bower_components/”
end
“`

“`css:main.scss
@import “bootstrap/dist/css/bootstrap.min.css”;
“`

これをコンパイルすると、いかん import となってしまいました。

“`css:main.css
@import url(bootstrap/dist/css/bootstrap.min.css);
“`

## Fonts

公式では

> bower で管理されたアセットファイル – 画像, フォントなど – を Middleman プロジェクトの中で利用するには, sprockets.import_asset を使って bower 管理下のファイルをインポートする必要があります。

と書かれており、下記が例として載っています。
これを実行すると、`js/jquery/dist/jquery.js` が作成されますが、このままでは利用しづらいです。

“`
sprockets.import_asset ‘jquery/dist/jquery.js’
“`

こちらで fonts もパスに追加してキレイに解決する方法が紹介されていました。
ありがとうございます。

> * [MiddlemanとBootswatchを使って、何分でブログを始められるか試してみた | Biblichor – scent of classics](http://biblichor.github.io/2014/02/16/start-middleman-blog-with-bootswatch-bower-scss-template.html)

.bowerrc の設定情報を元にインストールディレクトリ（今回は bower_components）を走査し、fonts ディレクトリを追加してくれています。

“`ruby:config.rb
# Bower configuration
ready do
@bower_config = JSON.parse(IO.read(“#{root}/.bowerrc”))
Dir.glob(File.join(“#{root}”, @bower_config[“directory”], “*”, “fonts”)) do |f|
sprockets.append_path f
end
sprockets.append_path File.join “#{root}”, @bower_config[“directory”]
end
“`

このように置き換えました。

`middleman build` でも /fonts へ関連ファイルが生成されていることが確認できました。

## Images

おなじく img ディレクトリも処理したいです。
img や images も走査してくれるように変更しましたが、画像ファイルの場合は、パスの追加だけではファイル生成されませんでした。
middleman-sprockets の fixtures を確認したところでは、このような形で登録する必要がありそうです。

“`ruby:config.rb
sprockets.import_asset(‘lightbox2/img/close.png’) { ‘img/close.png’ }
“`

> * [middleman-sprockets/config.rb at v3-stable · middleman/middleman-sprockets](https://github.com/middleman/middleman-sprockets/blob/v3-stable/fixtures/bower-individual-outputdir-app/config.rb)

なお `sprockets.append_path` もあわせて行わないと、`middleman server` で表示されませんでした。

## まとめ

というわけで `bower install` したコンポーネントへの対応をしました。
config.rb に無理矢理な感じで以下を追記しています。
すべての bower_components できちんと動くかは分かりませんが。。。

“`ruby:config.rb
# Bower configuration
def get_import_assets(path, split_str)
array = []
Dir.glob([“#{path}/*”, “#{path}/.*”]).each do |name|
unless File.directory?(name)
a = name.split(File.join(split_str, ‘/’))
array.push(a[1])
end
end
array
end
ready do
@bower_config = JSON.parse(IO.read(“#{root}/.bowerrc”))
bower_dir = @bower_config[‘directory’]
sprockets.append_path File.join(“#{root}”, bower_dir)
Dir.glob(File.join(“#{root}”, bower_dir, ‘*’, ‘fonts’)) do |path|
sprockets.append_path path
end
dir_names = %w(img images)
dir_names.each do |dir_name|
Dir.glob(File.join(“#{root}”, bower_dir, ‘*’, dir_name)) do |path|
sprockets.append_path path
get_import_assets(path, bower_dir).each do |image|
sprockets.import_asset(image) { File.join(dir_name, ‘/’, File.basename(image)) }
end
end
end
end
“`

スクリプトはともかく、このあたりを確認して Middleman を実戦で使えそうな気もしてきましたので、いろいろ試していきたいと思います。

## 補遺

bower_components は、別の方法を用いた方が良いのかな。

* source/css, js, img, fonts へ手動でコピーする。
* もしくは grunt で source/vendor あたりにレイアウトする。

> * [grunt-bower-task で Bower を扱いやすくレイアウトする | deadwood](https://www.d-wood.com/blog/2013/11/11_5021.html)

.bowerrc で vendor/bower におくとスッキリする。

> * [Middlemanの中でbowerを使う | e2esound.com業務日誌](http://blogged.e2esound.com//2013/05/09/bower_in_middleman_project/)

Rails では、CSS も画像もコピーされるよう。

> * [RailsプロジェクトにBowerを導入してHerokuへデプロイする // qnyp blog](http://blog.qnyp.com/2013/05/30/say-hello-to-bower/)
>
> また、Bowerによってvendor/assets/components以下にインストールされたJavaScriptライブラリに含まれるCSSファイルや画像ファイルは、ディレクトリ構成がそのままhttp://example.com/assets以下にコピーされます。

memo.

> * [Bowerとmiddlemanの統合 | dev.wan.co](http://k-shogo.github.io/article/2013/08/23/bower-middleman/)
> * [Bowerとrailsの統合 | dev.wan.co](http://k-shogo.github.io/article/2013/08/23/bower-rails/)
[/markdown]