[Middleman 3][Bower]初めてのMiddleman：Bowerを使ってjQueryなどのライブラリをロードする

この記事は書かれてから1年以上経過しており、内容が古い場合があります。

はじめに

今まで何となくBower[^1]を使っていたんですが、Middlemanでも便利に使えるようなので試してみました。前回紹介したアセットパイプラインがパスやファイルの統合を便利にしてくれているわけですが、Bowerでインストールしたライブラリをこのアセットパイプラインから呼び出せるようにするのが今回の目標です。ちなみに、アセットパイプラインはSprockets - Rack-based asset packagingというライブラリの機能です。

[^1]フロントエンド向けのパッケージマネージャ（gemやnpmのようなイメージ）

Bower

Bower - A package manager for the webはnode.jsで動きます。使いたいライブラリがgemにあればgemでも良いんですけどね。せっかくなのでフロントエンドで使うライブラリはBowerで管理することにします。

node.jsのインストール

まずはnode.jsをインストールします。インストーラー（公式ページからダウンロード）を使っても良いですし、Homebrewでもいけます。Homebrewでインストールする方はこちらHomebrewでnode.jsとnpmをインストールを参考にしてみてはどうでしょうか。そのうちnodebrewなんか使ってnode.jsのバージョンにも気を遣いたいですね。

Bowerを使うための準備

まずはnpmを使うために初期設定を行います。Middlemanを使っているディレクトリまで移動して、$ npm initを行います。

$ npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sane defaults.

See `npm help json` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg> --save` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
name: (htdocs) example.com
version: (1.0.0)
description: Example Web Site
entry point: (index.js)
test command:
git repository: 
keywords:
author: Nuko's Kitchen
license: (ISC)
About to write to /Users/nukos/Projects/example.com/htdocs/package.json:

{
  "name": "example.com",
  "version": "1.0.0",
  "description": "Example Web Site",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {},
  "author": "Ryuichi Nonaka",
  "license": "ISC"
}


Is this ok? (yes) yes

Bowerのインストール

Bowerをグローバルにインストールします。私の環境ではnodebrewを使っているのでsudoをつけています。

$ sudo npm install bower -g
/Users/nukos/.nodebrew/current/bin/bower -> /Users/nukos/.nodebrew/current/lib/node_modules/bower/bin/bower
bower@1.3.12 /Users/nukos/.nodebrew/current/lib/node_modules/bower
├── is-root@1.0.0
├── junk@1.0.0
├── stringify-object@1.0.0
├── which@1.0.8
├── abbrev@1.0.5
├── chmodr@0.1.0
├── osenv@0.1.0
├── archy@0.0.2
├── opn@1.0.1
├── rimraf@2.2.8
├── bower-logger@0.2.2
├── lru-cache@2.5.0
├── bower-endpoint-parser@0.2.2
├── graceful-fs@3.0.5
├── lockfile@1.0.0
├── nopt@3.0.1
├── retry@0.6.0
├── tmp@0.0.23
├── q@1.0.1
├── semver@2.3.2
├── p-throttler@0.1.0 (q@0.9.7)
├── chalk@0.5.0 (escape-string-regexp@1.0.2, ansi-styles@1.1.0, supports-color@0.2.0, has-ansi@0.1.0, strip-ansi@0.3.0)
├── request-progress@0.3.0 (throttleit@0.0.2)
├── fstream@1.0.4 (inherits@2.0.1)
├── mout@0.9.1
├── shell-quote@1.4.2 (array-map@0.0.0, array-filter@0.0.1, array-reduce@0.0.0, jsonify@0.0.0)
├── mkdirp@0.5.0 (minimist@0.0.8)
├── bower-json@0.4.0 (intersect@0.0.3, deep-extend@0.2.11, graceful-fs@2.0.3)
├── promptly@0.2.0 (read@1.0.5)
├── bower-config@0.5.2 (osenv@0.0.3, graceful-fs@2.0.3, optimist@0.6.1)
├── glob@4.0.6 (inherits@2.0.1, once@1.3.1, minimatch@1.0.0)
├── fstream-ignore@1.0.2 (inherits@2.0.1, minimatch@2.0.1)
├── tar-fs@0.5.2 (pump@0.3.5, tar-stream@0.4.7)
├── decompress-zip@0.0.8 (nopt@2.2.1, mkpath@0.1.0, touch@0.0.2, readable-stream@1.1.13, binary@0.3.0)
├── request@2.42.0 (caseless@0.6.0, json-stringify-safe@5.0.0, forever-agent@0.5.2, aws-sign2@0.5.0, stringstream@0.0.4, oauth-sign@0.4.0, tunnel-agent@0.4.0, qs@1.2.2, node-uuid@1.4.2, mime-types@1.0.2, form-data@0.1.4, bl@0.9.4, tough-cookie@0.12.1, http-signature@0.10.1, hawk@1.1.1)
├── bower-registry-client@0.2.3 (graceful-fs@2.0.3, request-replay@0.2.0, lru-cache@2.3.1, async@0.2.10, mkdirp@0.3.5, request@2.51.0)
├── handlebars@2.0.0 (optimist@0.3.7, uglify-js@2.3.6)
├── cardinal@0.4.0 (redeyed@0.4.4)
├── update-notifier@0.2.0 (semver-diff@0.1.0, string-length@0.1.2, configstore@0.3.2, latest-version@0.2.0)
├── inquirer@0.7.1 (figures@1.3.5, mute-stream@0.0.4, through@2.3.6, readline2@0.1.1, lodash@2.4.1, cli-color@0.3.2, rx@2.3.25)
└── insight@0.4.3 (object-assign@1.0.0, async@0.9.0, chalk@0.5.1, tough-cookie@0.12.1, lodash.debounce@2.4.1, os-name@1.0.3, configstore@0.3.2, inquirer@0.6.0)

これでBowerをインストールできました。インストールできているかバージョンをチェックしてみます。グローバルにインストールしていれば問題なく実行できると思いますが、--save-devなんてするとパスが通っていないので、コマンドが無いと言われるはずです。

$ bower --version
1.3.12

Bowerの初期設定

Bowerをインストールできたらnode.jsと似たような感じでBowerを使うための準備をします。

bower init
? name: example.com
? version: 1.0.0
? description: Example Web Site
? main file: index.js
? what types of modules does this package expose?:
? keywords:
? authors: Nuko's Kitchen
? license: MIT
? homepage: http://whiskers.nukos.kitchen/
? set currently installed components as dependencies?: Yes
? add commonly ignored files to ignore list?: Yes
? would you like to mark this package as private which prevents it from being accidentally published to the registry?: Yes

{
  name: 'example.com',
  version: '1.0.0',
  authors: [
    'Nukos Kitchen'
  ],
  description: 'Example Web Site',
  main: 'index.js',
  license: 'MIT',
  homepage: 'http://whiskers.nukos.kitchen/',
  private: true,
  ignore: [
    '**/.*',
    'node_modules',
    'bower_components',
    'test',
    'tests'
  ]
}

? Looks good?: Yes

この内容はbower.jsonに記録されます。これで準備完了です。

bowerでjqueryをインストールしてみる

さっそくBowerを使ってみましょう。とりあえずjQueryをインストールしてみます。

$ bower install jquery
bower jquery#*                  cached git://github.com/jquery/jquery.git#2.1.3
bower jquery#*                validate 2.1.3 against git://github.com/jquery/jquery.git#*
bower jquery#~2.1.3            install jquery#2.1.3

jquery#2.1.3 bower_components/jquery

Ver 2.1.3のjQueryがインストールできました。インストールされたライブラリはbower_componentsに格納されます。先ほどインストールしたjqueryのフォルダもありますね。bower_components/jqueryの中身を見てみるとよくわからないファイルがたくさん入っていますがdistというディレクトリの中身が実際に使うことになるjQuery関連のファイルです。

直接このディレクトリを参照しても使えますが、スマートでないのでSprocketsでアセットパイプラインから簡単に使えるようにしてみましょう。

config.rbを設定する

アセットパイプラインから使えるようにするためにconfig.rbにSprocketsの設定を書き加えます。

bowerのパスを追加する

まずは、Bowerのコンポーネントが入っているディレクトリbower_componentsへパスを通します。アセットパイプラインはsourceディレクトリがRootになっているため、外にあるbower_componentsを参照できるよう一段階層を上げてます。

after_configuration do
  sprockets.append_path '../bower_components'
end

この状態で、bower_componentsから階層を切ってjqueryのファイルにアクセスできるようになります。先ほどインストールしたjQueryであればアセットパイプラインで//= require "jquery/dist/jquery"と指定して使えるようになります。

これだけだとパスがシンプルでなく不便なのでもう少し詳しくパスを指定することで直接ファイルを指定できるようになります。

after_configuration do
  sprockets.append_path '../bower_components'
  sprockets.append_path '../bower_components/jquery/dist'
end

//= require "jquery"

これで、sourceディレクトリ上にファイルを置かなくてもライブラリを使えるようになりました。ライブラリのバージョンアップも一々Zipファイルをダウンロードしてきて置き換えるなんてこともしなくて済みます。

特定のファイルをインポートする

画像などを含むライブラリの場合、アセットパイプラインだけではできません。実体をsourceディレクトリ持ってくる必要があります。これももちろんSprocketsに指定を加えるだけでできます。

after_configuration do
  sprockets.import_asset 'jquery/dist/jquery.js'
end

これを追加するとアセットのjsディレクトリにjquery/dist/jquery.jsがインポートできます。この2つだけ覚えれば、とりあえず使うには十分だと思います。

Bowerコンポーネントのインストール場所を変更したい

そんな時はBowerのコンフィグファイルを作って、ディレクトリを指定します。設定ファイルは.bowerrcという名前でbower.jsonと同じ階層に設置します。中身はjsonで指定します。

{
  "directory": "vendor/bower_components/"
}

Bowerの設定に関する詳しい情報はBower Configurationをどうぞ。gitで管理している場合は.gitignoreにインストールディレクトリを指定することも忘れずに。

今回はここまで。また何か書きたいことができたら書きます。

次回：初めてのMiddleman：スケルトンを自作する方法

参考サイト

Middleman + Foundation + Amazon S3 でのBlogサイト構築(3)Foundation(とその他フロントエンドライブラリ)のインストール

シリーズ

Wercker step-s3sync でファイル名に日本語を含んでいる場合に Sync できない問題の解決方法（小ネタ）

2016-10-26
Wercker, Amazon S3, Middleman 3

ウェブデザイナーがはじめるAngularJS：AngularJS向けのディレクティブが用意されたUI Bootstrap

2015-07-06
AngularJS 1, Bootstrap 3, Middleman 3

初めてのMiddleman：Bowerで管理されているフォントファイルをインポートする

2015-05-27
Middleman 3

ウェブデザイナーがはじめるAngularJS：Middlemanでng-annotateを使ったMinify対策

2015-05-19
AngularJS 1, Middleman 3

初めてのMiddleman：Middleman-blogにカテゴリやシリーズなどのカスタムコレクションを追加する方法

2015-04-27
Middleman 3

初めての Middleman シリーズ初めてのMiddleman：Bowerを使ってjQueryなどのライブラリをロードする