[npm & Bower] Bower: JavaScript も CSS もまとめて管理する

公開日: 2013/11/10
更新日: 2019/09/19

前回、いまいち理解し切れていなかったんですが、フロントで使うものは何でもバージョン管理できるという便利ツールでした。

[markdown]
> * [Bower: JavaScript のパッケージマネージャについて調べる | deadwood](https://www.d-wood.com/blog/2013/11/01_4977.html)

こちらを読んでいて、なるほどと気づきました。

> * [bower component、さくっと公開して広めよう – Qiita [キータ]](http://qiita.com/fnobi/items/638c3b5be082ee996625)

いろいろ試してみます。

## bower init

bower.json

“`bower.json
% bower init
[?] name: gruntSample
[?] version: 0.0.1
[?] description: grunt sample project.
[?] main file: main.js
[?] keywords: grunt, bower
[?] authors: foo
[?] license: MIT
[?] homepage: https://github.com/DriftwoodJP/gruntSample
[?] 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 [?] would you like to mark this package as private which prevents it from being accidentally published to the registry? Yes
{
name: ‘gruntSample’,
version: ‘0.0.1’,
homepage: ‘https://github.com/DriftwoodJP/gruntSample’,
authors: [
‘foo ‘
],
description: ‘grunt sample project.’,
main: ‘main.js’,
keywords: [
‘grunt’,
‘bower’
],
license: ‘MIT’,
private: true,
ignore: [
‘**/.*’,
‘node_modules’,
‘bower_components’,
‘test’,
‘tests’
]
}
[?] Looks good? Yes
“`

自分のプロジェクトの管理だけであれば、name, version と後述する依存関係だけで動くようです。

> * [BOWER: A package manager for the web](http://bower.io/)
> * [Bower入門(基礎編) – from scratch](http://yosuke-furukawa.hatenablog.com/entry/2013/06/01/173308)

main, ignore を知りたい方は、こちらを読むと良いと思います。

> * [Bower入門(応用編) – from scratch](http://yosuke-furukawa.hatenablog.com/entry/2013/06/04/085537)

## インストール

### bower install \–save-dev

bower.jsonに依存関係を記述しつつ、インストールします。

“`prettyprinted
% bower install jquery –save-dev
bower cached git://github.com/components/jquery.git#2.0.3
bower validate 2.0.3 against git://github.com/components/jquery.git#*
bower install jquery#2.0.3
jquery#2.0.3 bower_components/jquery
“`

bower.json

“`bower.json
“devDependencies”: {
“jquery”: “~2.0.3”
}
“`

* \–save

Dependencies に列挙される。

* \–save-dev

devDependencies に列挙される。開発中のみ利用するものに。

bower.json に上記の記載がされていれば、以下のみでコンポーネントがインストールされます。

“`prettyprinted
% bower install
“`

\–production オプションを付けると、Dependencies のコンポーネントのみがインストールされます。

“`prettyprinted
% bower install –production
“`

### バージョン指定

バージョンを指定してインストールします。

“`prettyprinted
% bower install jquery#1 –save-dev
zsh: no matches found: jquery#1
“`

はいらないので確認してみます。

“`prettyprinted
% bower info jquery
bower cached git://github.com/components/jquery.git#2.0.3
bower validate 2.0.3 against git://github.com/components/jquery.git#*
{
name: ‘jquery’,
version: ‘2.0.3’,
description: ‘jQuery component’,
keywords: [
‘jquery’,
‘component’
],
main: ‘jquery.js’,
license: ‘MIT’,
homepage: ‘https://github.com/components/jquery’
}
Available versions:
– 2.0.3
– 2.0.2
– 2.0.1
– 2.0.0
– 1.10.2
– 1.10.1
:
:
– 1.2.3
You can request info for a specific version with ‘bower info jquery#‘
“`

ありますね。バックスラッシュを付けてみます。

“`prettyprinted
% bower install jquery\#1 –save-dev
bower cached git://github.com/components/jquery.git#1.10.2
bower validate 1.10.2 against git://github.com/components/jquery.git#1
Unable to find a suitable version for jquery, please choose one:
1) jquery#1 which resolved to 1.10.2
2) jquery#~2.0.3 which resolved to 2.0.3 and has gruntSample as dependants
Prefix the choice with ! to persist it to bower.json
[?] Answer: 1
bower install jquery#1.10.2
jquery#1.10.2 bower_components/jquery
“`

bower.json

“`bower.json
“devDependencies”: {
“jquery”: “1”
}
“`

## Component の検索

### 公式サイトで検索する

> * [Bower components](http://sindresorhus.com/bower-components/)

### コマンドで検索する

normalize.css を探してみます。

“`prettyprinted
% bower search normalize
Search results:
normalize-css git://github.com/necolas/normalize.css.git
normalize-scss git://github.com/appleboy/normalize.scss.git
normalize.scss git://github.com/JohnAlbin/normalize.css-with-sass-or-compass.git
normalize-stylus git://github.com/skw/normalize.stylus.git
normalize-for-search git://github.com/ikr/normalize-for-search.git
normalize.styl git://github.com/bymathias/normalize.styl.git
_normalize.scss git://github.com/jjt/_normalize.scss.git
modularized-normalize-scss git://github.com/hail2u/normalize.scss.git
underscore.normalize git://github.com/michael-lawrence/underscore.normalize.git
bootstrap-normalize git://github.com/shoehorn/normalize.git
normalize-sass git://github.com/pyp/normalize.sass.git
scss-normalize git://github.com/kaishin/scss-normalize.git
normalize-less git://github.com/additiveinverse/normalize.less
string-normalize git://github.com/pammacdotnet/JSStringNormalizer.git
“`

インストールします。

“`prettyprinted
% bower install normalize-css –save-dev
bower not-cached git://github.com/necolas/normalize.css.git#*
bower resolve git://github.com/necolas/normalize.css.git#*
bower download https://github.com/necolas/normalize.css/archive/v2.1.3.tar.gz
bower extract normalize-css#* archive.tar.gz
bower resolved git://github.com/necolas/normalize.css.git#2.1.3
bower install normalize-css#2.1.3
normalize-css#2.1.3 bower_components/normalize-css
% bower info normalize-css
bower cached git://github.com/necolas/normalize.css.git#2.1.3
bower validate 2.1.3 against git://github.com/necolas/normalize.css.git#*
{
name: ‘normalize-css’,
version: ‘2.1.3’,
main: ‘normalize.css’,
author: ‘Nicolas Gallagher’,
ignore: [
‘CHANGELOG.md’,
‘CONTRIBUTING.md’,
‘component.json’,
‘test.html’
],
homepage: ‘https://github.com/necolas/normalize.css’
}
Available versions:
– 2.1.3
– 2.1.2
– 2.1.1
– 2.1.0
– 2.0.1
– 2.0.0
– 1.1.3
– 1.1.2
– 1.1.1
– 1.1.0
– 1.0.2
– 1.0.1
– 1.0.0
You can request info for a specific version with ‘bower info normalize-css#‘
“`

## アンインストール

バージョンを間違えたので、アンインストールしてみます。

“`prettyprinted
% bower uninstall normalize-css –save-dev
bower uninstall normalize-css
% bower install normalize-css\#1 –save-dev
bower not-cached git://github.com/necolas/normalize.css.git#1
bower resolve git://github.com/necolas/normalize.css.git#1
bower download https://github.com/necolas/normalize.css/archive/v1.1.3.tar.gz
bower extract normalize-css#1 archive.tar.gz
bower resolved git://github.com/necolas/normalize.css.git#1.1.3
bower install normalize-css#1.1.3
normalize-css#1.1.3 bower_components/normalize-css
“`

## 利用方法

標準では、bower.json とおなじディレクトリに bower_components/ が作られて格納されています。

“`prettyprinted
/bower_components
├── jquery
│   ├── README.md
│   ├── bower.json
│   ├── component.json
│   ├── composer.json
│   ├── jquery-migrate.js
│   ├── jquery-migrate.min.js
│   ├── jquery.js
│   ├── jquery.min.js
│   ├── jquery.min.map
│   └── package.json
└── normalize-css
├── LICENSE.md
├── README.md
├── bower.json
└── normalize.css
“`

格納ディレクトリを変更する場合は、.bowerrc というファイルを作成します。

### .bowerrc

src/vendor ディレクトリに格納してみます。

“`.bowerrc
{
“directory”: “src/vendor”,
“json”: “bower.json”
}
“`

“`prettyprinted
% rm -rf bower_components
% subl .bowerrc
% bower install
bower cached git://github.com/necolas/normalize.css.git#1.1.3
bower validate 1.1.3 against git://github.com/necolas/normalize.css.git#1
bower cached git://github.com/components/jquery.git#1.10.2
bower validate 1.10.2 against git://github.com/components/jquery.git#1
bower install jquery#1.10.2
bower install normalize-css#1.1.3
jquery#1.10.2 src/vendor/jquery
normalize-css#1.1.3 src/vendor/normalize-css
“`

> * [BOWER: A package manager for the web](http://bower.io/)
> * [Bower入門(基礎編) – from scratch](http://yosuke-furukawa.hatenablog.com/entry/2013/06/01/173308)

### grunt-bower-task

より適切に Bower を管理するためには、grunt-bower-task を利用すると良さそうです。

> * [Grunt: grunt-bower-task で Bower を扱いやすくレイアウトする | deadwood](https://www.d-wood.com/blog/2013/11/11_5021.html)
> * [Bower入門(応用編) – from scratch](http://yosuke-furukawa.hatenablog.com/entry/2013/06/04/085537)
> * [GruntとBowerを使ってWeb開発用のテンプレートを作成する – タチコマ好きなエンジニアのブログ](http://yukihir0.hatenablog.jp/entry/2013/08/06/224722)
> * [grunt + bower で一気に環境構築 | デブハゲ](http://dev.hageee.net/22)
[/markdown]