パッケージマネージャーbowerを試してみた。

bowerが便利そうと思ってはや数週間
久しぶりに飲まずに帰ったので試してみました。

bowerとは

Bower - A package manager for the web

簡単に言うとjsのパッケージ管理ツールです。

$bower install jquery
$bower install bootstrap

とかやると
bower_componentsディレクトリにjqueryやbootstrapがインストールされます。
楽です。
installできるパッケージたちはここで検索できるようです。
Bower - Search

インストール

Macでbrewを使ったのでとても簡単に終わりました

$brew install node
$npm install -g bower
$bower -v
1.3.2

これでbowerが使えます。

使い方

新しく何かのprojectをやることを想定してみました。

$mkdir bower-try
$cd bower-try
$bower init

bower initでbower.jsonというものが作成されます。
色々聞かれますが、適当に←答えましょう。

[?] name: bower-try
[?] version: 0.0.0
[?] description:
[?] main file:
[?] what types of modules does this package expose?
[?] keywords:
[?] authors: email
[?] 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: 'bower-try',
  version: '0.0.0',
  authors: [
    'Arata <tarata43@yahoo.co.jp>'
  ],
  license: 'MIT',
  ignore: [
    '**/.*',
    'node_modules',
    'bower_components',
    'test',
    'tests'
  ]
}

[?] Looks good? Yes

Enter連打するとこんな感じになります。
jqueryとbootstrapをinstallしてみましょう

$bower install jquery bootstrap
$tree -L 2
.
├── bower.json
└── bower_components
    ├── bootstrap
    └── jquery

3 directories, 1 file

これでもうjqueryやbootstrapは使えますね。
viewの開発が捗りそうです。

でもこれじゃbower.jsonには残りません。
bower.jsonはなんのために存在しているんだ・・・
ってことにならないために
こんな時は --save option

$bower install jquery bootstrap --save
$cat bower.json
{
  "name": "bower-try",
  "version": "0.0.0",
  "authors": [
    "{email}"
  ],
  "license": "MIT",
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "test",
    "tests"
  ],
  "dependencies": {
    "jquery": "~2.1.0",
    "bootstrap": "~3.1.1"
  }
}

このファイルさえあればbower installを行うことで、
bower_components内にパッケージがない場合、
dependenciesに記載されたパッケージのインストールが行われます。

$rm -rf bower_components/*
$tree -L 2
.
├── bower.json
└── bower_components

$bower install
bower jquery#~2.1.0             cached git://github.com/jquery/jquery.git#2.1.0
bower jquery#~2.1.0           validate 2.1.0 against git://github.com/jquery/jquery.git#~2.1.0
bower bootstrap#~3.1.1          cached git://github.com/twbs/bootstrap.git#3.1.1
bower bootstrap#~3.1.1        validate 3.1.1 against git://github.com/twbs/bootstrap.git#~3.1.1
bower jquery#>= 1.9.0           cached git://github.com/jquery/jquery.git#2.1.0
bower jquery#>= 1.9.0         validate 2.1.0 against git://github.com/jquery/jquery.git#>= 1.9.0
bower jquery#~2.1.0            install jquery#2.1.0
bower bootstrap#~3.1.1         install bootstrap#3.1.1

jquery#2.1.0 bower_components/jquery

bootstrap#3.1.1 bower_components/bootstrap
└── jquery#2.1.0
$tree -L 2
.
├── bower.json
└── bower_components
    ├── bootstrap
    └── jquery

3 directories, 1 file