Bower メモ


# Bower とは？

[Bower](https://bower.io "Bower")
twitter社が作ったフロントエンド用のパッケージ管理ツールで、jquery/angularjs/reactなどのJSライブラリやbootstrapなどのCSSライブラリの管理を行えます。


# インストール

bower のインストールは、npm から行えます。

```bash
$ sudo npm -g install bower
/usr/local/bin/bower -> /usr/local/lib/node_modules/bower/bin/bower
/usr/local/lib
└── bower@1.7.9 

$ bower -v
1.7.9
$
```


# bower help

bower はサブコマンドで様々な操作を行うことができます。
bower helpでサブコマンド一覧を表示できます。

```bash
$ bower help

Usage:

    bower <command> [<args>] [<options>]
Commands:

    cache                   Manage bower cache
    help                    Display help information about Bower
    home                    Opens a package homepage into your favorite browser
    info                    Info of a particular package
    init                    Interactively create a bower.json file
    install                 Install a package locally
    link                    Symlink a package folder
    list                    List local packages - and possible updates
    login                   Authenticate with GitHub and store credentials
    lookup                  Look up a package URL by name
    prune                   Removes local extraneous packages
    register                Register a package
    search                  Search for a package by name
    update                  Update a local package
    uninstall               Remove a local package
    unregister              Remove a package from the registry
    version                 Bump a package version
Options:

    -f, --force             Makes various commands more forceful
    -j, --json              Output consumable JSON
    -l, --loglevel          What level of logs to report
    -o, --offline           Do not hit the network
    -q, --quiet             Only output important information
    -s, --silent            Do not output anything, besides errors
    -V, --verbose           Makes output more verbose
    --allow-root            Allows running commands as root
    -v, --version           Output Bower version
    --no-color              Disable colors
See 'bower help <command>' for more information on a specific command.
```


bower help サブコマンド でサブコマンドのヘルプが見れます。

```bash
$ bower help init

Usage:

    bower init [<options>]

Options:

    -h, --help              Show this help message
    Additionally all global options listed in 'bower help' are available

Description:

    Creates a bower.json file based on answers to questions.
```


# bower init

アプリケーションで使うライブラリや依存関係を記述した bower.json を作成します。
bower init するといくつか質問されるので、答えていくと bower.json が作られます。

| 質問 | デフォルト | 説明 |
|:---|:---|:---|
| name | ディレクトリ名 | ライブラリの名前 |
| description |  | ライブラリの説明 |
| main file |  | ライブラリのエンドポイント |
| keywords |  |  |
| authors | ユーザー名 | 作成者 |
| 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 |  |

```bash
$ mkdir bower
$ cd bower/
$
$ bower init
? name bower
? description 
? main file 
? keywords 
? authors ymaru
? license MIT
? homepage 
? set currently installed components as dependencies? Yes
? would you like to mark this package as private which prevents it from being accidentally published to the registry? No
cidentally published to the registry? (y/N) 
{
  name: 'bower',
  authors: [
    'ymaru'
  ],
  description: '',
  main: '',
  license: 'MIT',
  homepage: '',
  ignore: [
    '**/.*',
    'node_modules',
    'bower_components',
    'test',
    'tests'
  ]
}

? Looks good? Yes
$ ls
bower.json
```


# bower install

ライブラリをインストールします。

```bash
$ $ bower install jquery --save
bower not-cached    https://github.com/jquery/jquery-dist.git#*
bower resolve       https://github.com/jquery/jquery-dist.git#*
bower checkout      jquery#3.1.0
bower progress      jquery#* Receiving objects:  19% (27/141)
bower progress      jquery#* Receiving objects:  20% (29/141)
bower progress      jquery#* Receiving objects:  21% (30/141)
bower progress      jquery#* Receiving objects:  21% (31/141), 52.00 KiB | 22.00 KiB/s
bower progress      jquery#* Receiving objects:  23% (33/141), 116.00 KiB | 35.00 KiB/s
bower progress      jquery#* Receiving objects:  24% (34/141), 116.00 KiB | 35.00 KiB/s
bower progress      jquery#* Receiving objects:  24% (35/141), 132.00 KiB | 33.00 KiB/s
bower progress      jquery#* Receiving objects:  26% (37/141), 172.00 KiB | 37.00 KiB/s
bower progress      jquery#* Receiving objects:  26% (37/141), 188.00 KiB | 35.00 KiB/s
bower progress      jquery#* Receiving objects:  26% (37/141), 204.00 KiB | 30.00 KiB/s
bower progress      jquery#* Receiving objects:  26% (37/141), 220.00 KiB | 26.00 KiB/s
bower progress      jquery#* Receiving objects:  26% (37/141), 228.00 KiB | 17.00 KiB/s
bower progress      jquery#* Receiving objects:  27% (39/141), 236.00 KiB | 16.00 KiB/s
bower progress      jquery#* Receiving objects:  27% (39/141), 260.00 KiB | 14.00 KiB/s
bower progress      jquery#* Receiving objects:  31% (44/141), 268.00 KiB | 13.00 KiB/s
bower progress      jquery#* Receiving objects:  45% (64/141), 284.00 KiB | 12.00 KiB/s
bower progress      jquery#* Receiving objects:  63% (89/141), 316.00 KiB | 14.00 KiB/s
bower resolved      https://github.com/jquery/jquery-dist.git#3.1.0
bower install       jquery#3.1.0

jquery#3.1.0 bower_components/jquery

```

インストールしたライブラリは bower_components 配下に保存されます。
※パスは以下に記載している .bowerrc で変更できます。

```bash
$ find bower_components -type f 
bower_components/jquery/.bower.json
bower_components/jquery/AUTHORS.txt
bower_components/jquery/bower.json
bower_components/jquery/dist/core.js
bower_components/jquery/dist/jquery.js
bower_components/jquery/dist/jquery.min.js
bower_components/jquery/dist/jquery.min.map
bower_components/jquery/dist/jquery.slim.js
bower_components/jquery/dist/jquery.slim.min.js
bower_components/jquery/dist/jquery.slim.min.map
bower_components/jquery/external/sizzle/dist/sizzle.js
bower_components/jquery/external/sizzle/dist/sizzle.min.js
bower_components/jquery/external/sizzle/dist/sizzle.min.map
bower_components/jquery/external/sizzle/LICENSE.txt
bower_components/jquery/LICENSE.txt
bower_components/jquery/README.md
… 略 …
$

```

--save を付けると bower.json に依存関係が記述されます。
別環境に依存関係のファイルをインストールする場合、bower.json があれば、
bower install するだけで依存関係のファイルをすべてインストールしてくれます。

```bash
$ cat bower.json
{
  "name": "bower",
  "authors": [
    "ymaru"
  ],
  "description": "",
  "main": "",
  "license": "MIT",
  "homepage": "",
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "test",
    "tests"
  ],
  "dependencies": {
    "jquery": "^3.1.0"
  }
}
```

bower install jquery だと、最新版がインストールされます。
bower install jquery#1 で、v1 系の最新版がインストールされます。

# bower list

インストールしているライブラリの一覧を表示します。

```bash
$ bower list
bower check-new     Checking for new versions of the project dependencies...
bower /Users/ymaru/bower
└── jquery#3.1.0
$
```

# bower info

ライブラリのバージョンや情報を表示します。

```bash
$ bower info jquery
bower cached        https://github.com/jquery/jquery-dist.git#3.1.0
bower validate      3.1.0 against https://github.com/jquery/jquery-dist.git#*

{
  name: 'jquery',
  main: 'dist/jquery.js',
  license: 'MIT',
  ignore: [
    'package.json'
  ],
  keywords: [
    'jquery',
    'javascript',
    'browser',
    'library'
  ],
  homepage: 'https://github.com/jquery/jquery-dist',
  version: '3.1.0'
}

Available versions:
  - 3.1.0
  - 3.0.0
  - 2.2.4
  - 2.2.3
  - 2.2.2
  - 2.2.1
  - 2.2.0
  - 2.1.4
  - 2.1.3
  - 2.1.2
  - 2.1.1
  - 2.1.0
  - 2.0.3
  - 2.0.2
  - 2.0.1
  - 2.0.0
  - 1.12.4
  - 1.12.3
  - 1.12.2
  - 1.12.1
  - 1.12.0
  - 1.11.3
  - 1.11.2
  - 1.11.1
  - 1.11.0
  - 1.10.2
  - 1.10.1
  - 1.10.0
  - 1.9.1
  - 1.9.0
  - 1.8.3
  - 1.8.2
  - 1.8.1
  - 1.8.0
  - 1.7.2
  - 1.7.1
  - 1.7.0
  - 1.6.4
  - 1.6.3
  - 1.6.2
  - 1.6.1
  - 1.6.0
  - 1.5.2
  - 1.5.1
  - 1.5.0
  - 1.4.4
  - 1.4.3
  - 1.4.2
  - 1.4.1
  - 1.4.0
  - 1.3.2
  - 1.3.1
  - 1.3.0
  - 1.2.6
  - 1.2.5
  - 1.2.4
  - 1.2.3
  - 1.2.2
  - 1.2.1
  - 1.1.4
  - 1.1.3
  - 1.1.2
  - 1.1.1
  - 1.0.4
  - 1.0.3
  - 1.0.2
  - 1.0.1

Show 22 additional prereleases with ‘bower info jquery --verbose’
You can request info for a specific version with 'bower info jquery#<version>'
$
```

# bower uninstall

ライブラリをアンインストールします。

```bash
$ bower uninstall jquery --save
bower uninstall     jquery
$
```

# .bowerrc


bower.json と同じディレクトリに .bowerrc というファイルがあると bower の設定ができます。
proxyの設定や bower_componentsのパスなどを変更できます。

```bash
$cat .bowerrc
{
  "cwd": "~/.my-project",
  "directory": "bower_components",
  "registry": "https://bower.herokuapp.com",
  "shorthand-resolver": "git://github.com//.git",
  "proxy": "http://proxy.local",
  "https-proxy": "http://proxy.local",
  "ca": "/var/certificate.pem",
  "color": true,
  "timeout": 60000,
  "save": true,
  "save-exact": true,
  "strict-ssl": true,
  "storage": {
    "packages" : "~/.bower/packages",
    "registry" : "~/.bower/registry",
    "links" : "~/.bower/links"
  },
  "interactive": true,
  "resolvers": [
    "mercurial-bower-resolver"
  ],
  "shallowCloneHosts": [
    "myGitHost.example.com"
  ],
  "scripts": {
    "preinstall": "",
    "postinstall": "",
    "preuninstall": ""
  },
  "ignoredDependencies": [
    "jquery"
  ]
}
$
```


# 参考

- [Bower config](https://bower.io/docs/config/)
- [Bower 入門(基礎編)](http://yosuke-furukawa.hatenablog.com/entry/2013/06/01/173308)