前回はMiddlemanのインストールから、Blogサイトのスケルトン(雛形)を作成するところまでを記載しました。 今回はBowerを使ってFoundation等のフロントエンドライブラリをインストールする手順を記載します。
Bowerとは
- Twitter社製のフロントエンドライブラリ用パッケージマネージャ
- RubyでいうところのBundlerのようなもの
- コマンドラインからフロントエンドライブラリのインストール、アンインストール、アップデートなどが実行できる
- ライブラリ間の依存関係を管理できる
今回のBlogサイトでは使用するフロントエンドライブラリも少数なので個々にインストールしても良かったのですが、 勉強がてら試しにBowerを使ってみることにしました。
node.jsインストール
Bowerはnode.jsベースのツールなので、まずはnode.jsをインストールします。
公式サイトでインストーラが配布されているのでそれを使うのが手順としては一番簡単かと思います。
私はnode.jsのversion管理ができるnodebrewを使ってインストールしました。以下を実行すると、~/.nodebrewにnodebrewがインストールされます。
$ curl -L git.io/nodebrew | perl - setup
nodebrewのbinディレクトリをpathに追加しておきます。私はzshを使っているので~/.zshrcに追加しました。
bashの場合は~/.bashrcなどに追加すればよいかと思います。
$ export PATH=$HOME/.nodebrew/current/bin:$PATH >> .zshrc
$ source ~/.zshrc
node.jsをインストールします。nodebrew ls-remoteでインストール可能なnode.jsのバージョンが確認できます。v0.10.xxがStableなリリースなので、その最新版をインストールしました。
$ nodebrew install-binary v0.10.24
nodebrew useで使用するバージョンを選択します。その後node -vでバージョンが表示されればインストール完了です。
$ nodebrew use v0.10.24
$ node -v
v0.10.24
Bowerインストール
Bowerをインストールします。node.jsにはnode.js用のパッケージマネージャのnpmがバンドルされているので、これを使います。
$ npm install bower -g
-gオプションを指定したので、.nodebrew/node/v0.10.24/lib/node_modulesにbowerがインストールされました。ライブラリをシステムワイドに使用しない(特定プロジェクトのみで使用する)場合は-gなしでコマンドを実行します。(この場合はカレントディレクトリのnode_modulesにライブラリがインストールされます。)
Bowerのバージョンを確認してみます。
$ bower -v
1.2.8
Bowerの初期化
Bowerでライブラリを管理する準備をします。middlemanのプロジェクトフォルダ(下記の例ではmy_blog)に移動して、bower initを実行します。色々と質問されますが、全てデフォルトで問題ないと思います。
$ cd my_blog
$ bower init
[?] name: my_blog
[?] version: 0.0.0
[?] description:
[?] main file:
[?] keywords:
[?] authors: Yutaka Yawata <xxxxx@xxx.xxx>
[?] license: MIT
[?] homepage:
[?] 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? No
{
name: 'my_blog',
version: '0.0.0',
authors: [
'Yutaka Yawata <xxxxx@xxx.xxx>'
],
license: 'MIT',
ignore: [
'**/.*',
'node_modules',
'bower_components',
'test',
'tests'
]
}
[?] Looks good? Yes
質問への回答が反映された形で、middlemanのプロジェクトフォルダ直下に以下のようなbowerの設定ファイルbower.jsonが生成されます。
{
"name": "my_blog",
"version": "0.0.0",
"authors": [
"Yutaka Yawata <xxxxx@xxx.xxx>"
],
"license": "MIT",
"ignore": [
"**/.*",
"node_modules",
"bower_components",
"vendor/bower_components",
"test",
"tests"
]
}bowerを使うと自作のライブラリをBowerのリポジトリに公開することもできます。version以下はそのための設定です。今回はローカル環境でのパッケージマネージャとしてのみの利用なので、最低限nameの設定があればOKです。それ以外は削除してしまっても問題ありません。
もう一つ、.bowerrcというファイルを手動で作成し、これを使ってライブラリのインストール先ディレクトリを変更しておきます。デフォルトはbower.jsonと同じ階層のbower_componenetsにライブラリがインストールされますが、今回はvendor/bower_componentsに変更しました。設定はjsonで書きます。
{
"directory" : "vendor/bower_components"
}これは必須設定ではありませんので、ディレクトリパスはお好みで構いません。注意点としては、middlemanのsourceディレクトリ内にライブラリを配置するとライブラリのreadmeファイルなどもbuild時のコンパイル対象となってしまうので、sourceディレクトリの外に配置するのがよいと思います。
フロントエンドライブラリのインストール
Bowerのセットアップが完了したので、早速Foundationをインストールしてみます。パッケージ名を指定してbower installを実行します。
$ bower install foundation
Foundationと、その依存ライブラリが.bowerrcで指定したとおりvendor/bower_componentsにインストールされます。
└── vendor
└── bower_components
├── fastclick
├── foundation
├── jquery
├── jquery-placeholder
├── jquery.cookie
├── lodash
└── modernizr
デフォルトでは最新バージョンがインストールされますが、以下のようにライブラリのバージョンを指定してインストールすることもできます。
$ bower install foundation#5.0.3
Bowerのリポジトリに公開されていないものでも、ライブラリの公開URLを直接指定してインストールすることもできます。以下はgithubからFoundationをインストールする例です。
$ bower install git://github.com/zurb/foundation.git
bower installだけだと単にライブラリを所定のディレクトリにダウンロードしてくるだけですが、--saveオプションを指定するとbower.jsonに自動的に依存関係を書き込んでくれます。
$ bower install foundation --save
bower.jsonを見てます。
{
"name": "my_blog",
"version": "0.0.0",
"authors": [
"Yutaka Yawata <xxxxx@xxx.xxx>"
],
"license": "MIT",
"ignore": [
"**/.*",
"node_modules",
"bower_components",
"vendor/bower_components",
"test",
"tests"
],
"dependencies": {
"foundation": "~5.0.3"
}
}"dependencies"の部分がそれです。"foundation": "~5.0.3"という具合に、パッケージ名と値を記述します。(ここで言う依存関係とは、プロジェクトで必要なライブラリ、という意味です。)
bower.jsonに依存関係を記述しておくと、次回以降はbower installだけでお目当てのライブラリがインストールできます。
今回は--saveオプションでbower.jsonに依存関係を書き込みましたが、手動で依存関係を記述した上でbower installというやり方もできます。
~5.0.3というバージョン指定は、5.0.3～5.0.9までのバージョンを指しています。
こうしておくと、5.0.3～5.0.9までのバージョンで最新のものがインストールされます。バージョンを固定したい場合は単に5.0.3と書きます。
ちなみにBowerのリポジトリに公開されているライブラリはSemantic Versioningに準拠しているようなので、 3桁目はバグフィックスが含まれるパッチ番号、ということになります。
ライブラリをアップデートする場合はbower updateを実行します。アップデートするものがない場合はライブラリの再インストールが実行されます。
$ bower update
ところで上記のbower.jsonにはjQueryなどのFoundationの依存ライブラリの記述が見当たりません。これはvendor/bower_components/foundation/bower.jsonに記述されています。
{
"name": "foundation",
"version": "5.0.3",
"main": [
"css/foundation.css",
"js/foundation.js"
],
"dependencies": {
"jquery": ">= 2.0.0",
"modernizr": ">= 2.6.2",
"fastclick": "~0.6.11",
"jquery.cookie": "~1.4.0",
"jquery-placeholder": "~2.0.7",
"lodash": "~2.4.1"
},
"devDependencies": {
"jquery.autocomplete": "devbridge/jQuery-Autocomplete#1.2.7"
},
"private": true
}Bowerでライブラリをインストールすると、インストールしたライブラリに含まれるbower.jsonもチェックされて
芋づる式に依存ライブラリをインストールしてくれる、というわけです。
最後にFont AwesomeとNormalize.cssもBowerでインストールしておきます。Normalize.cssはSass版をインストールしました。
２つのパッケージ名を指定して、一気にインストールします。
$ bower install font-awesome normalize-scss --save
最終的にbower.jsonは以下のようになりました。
{
"name": "my_blog",
"version": "0.0.0",
"authors": [
"Yutaka Yawata <yuyawata@gmail.com>"
],
"license": "MIT",
"ignore": [
"**/.*",
"node_modules",
"bower_components",
"vendor/bower_components",
"test",
"tests"
],
"dependencies": {
"foundation": "~5.0.3",
"font-awesome": "~4.0.3",
"normalize-scss": "~2.1.3"
}
}vendor/bower_componentsは以下です。
└── vendor
└── bower_components
├── fastclick
├── font-awesome
├── foundation
├── jquery
├── jquery-placeholder
├── jquery.cookie
├── lodash
├── modernizr
└── normalize-scss
まとめ
Blogサイトで使用するフロントエンドライブラリのインストールまでできました。Bowerを使うとライブラリのアップデートが簡単にできるのが良いなと。 今回はBowerを使いましたが、フロントエンドライブラリはgem化されているものもあるのでそれを使ってもよいと思います。
次回はBlogの基本設定について記載します。