BowerでjQueryやbootstrapを自動で取ってくるようにする

bowercomposerjQueryとか持ってくる版みたいな奴と思ってればおっけい。npmでインストールするんでnpmが入っていなかったら入れて以下でbowerのインストールは終わり

npm install -g bower

ウェーイ

$ bower -v
1.4.1

jQueryをコマンドで入れてみる

$ bower install jquery
bower jquery#*              not-cached git://github.com/jquery/jquery.git#*
bower jquery#*                 resolve git://github.com/jquery/jquery.git#*
bower jquery#*                download https://github.com/jquery/jquery/archive/2.1.3.tar.gz
bower jquery#*                 extract archive.tar.gz
bower jquery#*                resolved git://github.com/jquery/jquery.git#2.1.3
bower jquery#~2.1.3            install jquery#2.1.3
jquery#2.1.3 bower_components/jquery

なんか色々入ってくるけど、jQueryを使うってだけならdist以下の必要なファイルをあとで取ってこればおっけい。取ってくる作業をshellとかで自動化してもいいけど、grunt使うと必要なファイルを必要なディレクトリにまとめるのが楽なので別でまとめる

必要ファイルをbower.jsonにまとめる

必要ファイルをbower.jsonとかにまとめておけばbower installで一発でできるようになる。そのbower.jsonbower initで作れるからやってみたら、聞かれること多すぎる上に必要ない設定も追加されて、最終的に必要な項目も生成されなかったので手作業で作ることにして、結果できた最小構成がこれ。

{
"name": "my-project",
"version": "1.0.0",
"ignore": [
".jshintrc",
"**/*.txt"
],
"dependencies": {}
}

このbower.jsonを保存しておいて、さっきのbower install packageをやる時に--saveってすると勝手にbower.jsonに保存される

$ bower install jquery --save
$ bower install bootstrap-sass --save

こういう風になった

{
"name": "my-project",
"version": "1.0.0",
"ignore": [
".jshintrc",
"**/*.txt"
],
"dependencies": {
"jquery": "~2.1.3",
"bootstrap-sass": "~3.3.4"
}
}

一旦bower_compornentsを削除してからbower installやればdependencies`に設定されているものがインストールされる。gruntを使えばファイルを移動させたり結合したりできるんだが、複雑になるんでshellでそのあたりの処理をやっても私はいいと思う。gruntについては後日まとめておく。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA