Bower: JavaScript も CSS もまとめて管理する

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

Bower: JavaScript のパッケージマネージャについて調べる | deadwood

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

bower component、さくっと公開して広めよう – Qiita [キータ]

いろいろ試してみます。

Contents

bower init

bower.json

% bower init
[?] name: gruntSample
[?] version: 0.0.1
[?] description: grunt sample project.
[?] main file: main.js
[?] keywords: grunt, bower
[?] authors: foo <foo@exsample.com>
[?] 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 <foo@exsample.com>'
  ],
  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
Bower入門(基礎編) – from scratch

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

Bower入門(応用編) – from scratch

インストール

bower install --save-dev

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

% 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

  "devDependencies": {
    "jquery": "~2.0.3"
  }

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

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

% bower install

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

% bower install --production

バージョン指定

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

% bower install jquery#1 --save-dev
zsh: no matches found: jquery#1

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

% 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#<version>'

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

% 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

  "devDependencies": {
    "jquery": "1"
  }

Component の検索

公式サイトで検索する

Bower components

コマンドで検索する

normalize.css を探してみます。

% 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

インストールします。

% 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#<version>'

アンインストール

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

% 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/ が作られて格納されています。

/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 ディレクトリに格納してみます。

{
  "directory": "src/vendor",
  "json": "bower.json"
}

% 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
Bower入門(基礎編) – from scratch

grunt-bower-task

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

Grunt: grunt-bower-task で Bower を扱いやすくレイアウトする | deadwood
Bower入門(応用編) – from scratch
GruntとBowerを使ってWeb開発用のテンプレートを作成する – タチコマ好きなエンジニアのブログ
grunt + bower で一気に環境構築 | デブハゲ