なにはともあれ入れてみるぜ。バウワー。(bower)

  • 72
    いいね
  • 0
    コメント
この記事は最終更新日から1年以上が経過しています。

これ入れてみた。
https://github.com/twitter/bower

バウワーいわく「バウアーは、Web用のパッケージマネージャです。バウアーでは、簡単に画像やCSS、JavaScriptなどの資産をインストールすることができ、あなたの依存関係を管理します。」

よし、いくぜジャック!

インストール

$ npm install bower -g

ずらずらずら、、、

bower@0.1.0 /home/hoge/nvm/v0.8.8/lib/node_modules/bower
├── archy@0.0.2
├── colors@0.6.0-1
├── tmp@0.0.14
├── async@0.1.22
├── mkdirp@0.3.4
├── underscore@1.3.3
├── semver@1.0.14
├── request@2.11.1
├── hogan.js@2.0.0
├── rimraf@2.0.2 (graceful-fs@1.1.10)
├── fstream@0.1.19 (inherits@1.0.0, graceful-fs@1.1.10)
├── nopt@2.0.0 (abbrev@1.0.3)
├── vows@0.6.4 (eyes@0.1.8, diff@1.0.3)
├── glob@3.1.12 (inherits@1.0.0, graceful-fs@1.1.10, minimatch@0.2.6)
└── read-package-json@0.1.5 (graceful-fs@1.1.10, lru-cache@2.0.2, slide@1.1.3, npmlog@0.0.2)

はいできあがり。
見慣れないのも少しある。

さっそくbowerからjQueryを入れてみる

$ bower install jquery
bower cloning git://github.com/components/jquery.git
bower caching git://github.com/components/jquery.git
bower fetching jquery
bower checking out jquery#1.8.1
bower copying /home/hoge/.bower/jquery

入った?

$ ls -l /home/hoge/.bower/
total 4
drwxr-xr-x 3 hoge hoge 4096  9月 11 12:07 jquery

$ ls -l /home/hoge/.bower/*
/home/hoge/.bower/jquery:
total 240
-rw-rw-r-- 1 hoge hoge    117  9月 11 12:07 component.json
-rw-rw-r-- 1 hoge hoge 238158  9月 11 12:07 jquery.js

入った。なるほど。

component.jsonって何?

$ cat /home/hoge/.bower/jquery/component.json
{
  "name"        : "jquery",
  "version"     : "1.8.1",
  "main"        : "./jquery.js",
  "dependencies": {
  }
}

npm の package.json みたいなものですね。とりあえず jquery だから依存関係 dependencies なし。

(P.S.追記 20120912 言うまでもないかもしれませんが、ここでは nvm の node v0.8.8 の時に -g でいれてるので、bower は、/home/hoge/nvm/v0.8.8/lib/node_modules/ 以下に入っています。したがって、将来 nvm use v0.8.9 などでカレント node バージョンを変えたらこの node v0.8.8 用の bower へのパスは通らなくなるはずです。まぁ、v0.8.9 環境に再インストールってことです。でも、bower でいれた(たとえばこの jquery などの)パッケージ自体は /home/hoge/.bower/ 以下に入るようなので bower + node のバージョンとは関係なく使えるのではないかと思います)

(P.S.追記 20120912 /home/hoge/.bower/の他に /home/hoge/components というのができています

$ ls -l /home/hoge/components
total 4
drwx------ 2 hoge hoge 4096  9月 12 01:16 jquery

tato2@bloga:~$ ls -l /home/tato2/components/*
total 260
-rw-rw-r-- 1 hoge hoge    309  9月 12 01:16 component.json
-rw-rw-r-- 1 hoge hoge 261525  9月 12 01:16 jquery.js

あれ?パーミッションが違うね。
component.jsonの中は?

$ cat /home/hoge/components/jquery/component.json
{
  "name": "jquery",
  "version": "1.8.1",
  "main": "./jquery.js",
  "dependencies": {},
  "_id": "jquery@1.8.1",
  "readme": "ERROR: No README.md file found!",
  "description": "ERROR: No README.md file found!",
  "repository": {
    "type": "git",
    "url": "git://github.com/components/jquery.git"
  }

あれ?こっちも随分違うなぁ、、、。まぁ、内部処理用だよねきっと。うーん、よくわからない。。。)

じゃ、とりあえず、使い方を

ヘルプ、ミー

$ bower help

Usage:

    bower <command> <options>

Commands:

    help, install, list, ls, uninstall, update, lookup, info, register, search

Example:

    $ bower install bootstrap spine jquery

General Help:

    http://git.io/bower

なるほど、

bower ls

$ bower ls
/home/hoge
└── jquery#1.8.1

$ bower list
/home/hoge
└── jquery#1.8.1

なるほふぉど、lsとlistは同じか。

bower info

infoってなんだろ?

$ bower info

Usage:

    bower info <pkg>

Description:

    Version info and description of a particular package.

ああそうか。バージョンリストがもらえるわけだ。

bower info jquery
jquery 

  Versions:
    - 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.3

bower search

$ bower search jquery
Search results:

  - jquery git://github.com/components/jquery.git
  - jquery-simpleweather git://github.com/monkeecreate/jquery.simpleWeather
  - jquery-ui git://github.com/components/jqueryui
  - jquery-pjax git://github.com/defunkt/jquery-pjax.git
  - jquery.outbound-analytics git://github.com/gmurphey/jquery.outbound-analytics

ああ、サーチですね。指定しないとどんだけでてくる?

$ bower search
Search results:

  - zepto git://github.com/madrobby/zepto
  - yeoman-wordpress git://github.com/romainberger/yeoman-wordpress
  - valentine git://github.com/ded/valentine.git
  - underscore git://github.com/documentcloud/underscore.git
  - traversty git://github.com/rvagg/traversty.git
  - tipsy git://github.com/jaz303/tipsy
  - string-format git://github.com/jsoverson/string-format.git
  - spine git://github.com/maccman/spine.git
  - responsiveiframe git://github.com/npr/responsiveiframe
  - raphael git://github.com/DmitryBaranovskiy/raphael.git
  - qwery git://github.com/ded/qwery.git
  - popcornjs git://github.com/mozilla/popcorn-js
  - pledge git://github.com/rowanmanning/pledge.git
  - oridomi git://github.com/dmotz/oriDomi
  - octo git://github.com/Caged/octo.git
  - normalize-css git://github.com/necolas/normalize.css.git
  - nocomponent git://github.com/aeosynth/demos
  - moment git://github.com/timrwood/moment.git
  - marionette git://github.com/marionettejs/backbone.marionette.git
  - lodash git://github.com/bestiejs/lodash
  - lessbag git://github.com/happysri/lessbag.git
  - json2 git://github.com/douglascrockford/JSON-js.git
  - jquery-ui git://github.com/components/jqueryui
  - jquery-simpleweather git://github.com/monkeecreate/jquery.simpleWeather
  - jquery-pjax git://github.com/defunkt/jquery-pjax.git
  - jquery.outbound-analytics git://github.com/gmurphey/jquery.outbound-analytics
  - jquery git://github.com/components/jquery.git
  - i18next git://github.com/jamuhl/i18next
  - handlebars-clauswitt git://github.com/clauswitt/handlebars.js.git
  - handlebars git://github.com/components/handlebars.js
  - H5F git://github.com/ryanseddon/H5F.git
  - frag git://github.com/rowanmanning/frag.git
  - fleck git://github.com/trek/fleck
  - element-pants git://github.com/dandean/element-pants.git
  - domready git://github.com/ded/domready.git
  - d3 git://github.com/mbostock/d3.git
  - canjs git://github.com/jupiterjs/canjs.git
  - bowser git://github.com/ded/bowser.git
  - bootstrap-ajax git://github.com/eldarion/bootstrap-ajax
  - bonzo git://github.com/ded/bonzo.git
  - bean git://github.com/fat/bean.git
  - backbone git://github.com/documentcloud/backbone.git
  - angular git://github.com/angular/bower-angular.git

すくなっ。これは記念的?

bower lookup

lookupてなんじゃろ?

$ bower lookup

Usage:

    bower lookup <package>

Description:

    Looks up a package url by name

ああ、そうですか。

$ bower lookup jquery
jquery git://github.com/components/jquery.git

もう、なんもかんもgitですね。いまどきは。
あと、registerとuninstallか。registerはあれかな?ちょと怖い。

bower register

$ bower register

Usage:

    bower register <name> <url>

Description:

    Register a package.

やっぱ、これは怖い。パス。
じゃ、鳥です。

bower uninstall

bower uninstall

え?返事してくれないの?

$ bower ls
/home/hoge
└── jquery#1.8.1

ああ、大丈夫^^;;

一瞬パッケージ名指定しないでuninstallすると無言で全部削除されるのか??とか思った。

じゃたぶんこういうことで、、、

$ bower uninstall jquery
bower uninstalling /home/hoge/components/jquery

$ bower ls
/home/hoge

はい完了!。おつかれさまでした~(^0^)/

おまけ:バージョン指定したらどうなるの?

$ bower install jquery#1.6.4
bower cloning git://github.com/components/jquery.git
bower cached git://github.com/components/jquery.git
bower fetching jquery
bower checking out jquery#1.6.4
bower copying /home/hoge/.bower/jquery

$ bower ls
/home/hoge
└── jquery#1.6.4 (1.8.1 now available)

$ bower install jquery#1.7.2
bower cloning git://github.com/components/jquery.git
bower cached git://github.com/components/jquery.git
bower fetching jquery
bower checking out jquery#1.7.2
bower copying /home/hoge/.bower/jquery

$ bower ls
/home/hoge
└── jquery#1.7.2 (1.8.1 now available)

上書きかよっ。ぷんぷん。

ほんとかなぁ、、、

$ ls -l /home/hoge/.bower/jquery
total 252
-rw-rw-r-- 1 hoge hoge    117  9月 11 12:40 component.json
-rw-rw-r-- 1 hoge hoge 252881  9月 11 12:40 jquery.js
$ cat /home/hoge/.bower/jquery/component.json
{
  "name"        : "jquery",
  "version"     : "1.7.2",
  "main"        : "./jquery.js",
  "dependencies": {
  }
}

本当でした、、、あ、いや、ちょっとまて。

@bloga:~$ bower help install

Usage:

    bower install
    bower install <folder>
    bower install <pkg>
    bower install <pkg>#<version>

Options:

    --save - adds a dependency entry to a project's component.json

Can specify one or more:

    bower install ./foo/package git://example.com#1.0.2

Description:

    Installs a browser package locally into a components directory

このfolderっていう引数はpkgと併記できないのかな?、、、あ、できるか、でも、そりゃ意味が違うよなぁ

でも、まぁ、クライアント側のパッケージって、後方互換にやさしいからきっと大丈夫^^? jQueryは、上書きしてもきっと問題ないかな?、、、でも、やはり、ちょっと嫌だな。

てことで、どうやら、バウワーは(今のところ?)バージョン管理ができないんだぜぃ~(??)。ワイルドだろ? <もし方法があったら教えてね

削除してみる

npm uninstall bower -g

どうかな?

$ ls -l /home/hoge/nvm/v0.8.8/lib/node_modules/bower
ls: cannot access /home/hoge/nvm/v0.8.8/lib/node_modules/bower: No such file or directory

無くなった。
でも /home/hoge/.bower/以下のパッケージは残ってる。
そうか。

じゃ、再インストールしたらどうだろう?

$ npm uninstall bower -g

$ bower list
/home/hoge
└── jquery#1.8.0 (1.8.1 now available)

やっぱり生き返りました。

あれ?昨日 jqueryの1.8.1入れた時は (1.8.1 now available)なんて書いて無かったよな。

bower update

これ、update すれば1.8.1になるのかな? でも bower update って打ったらhelpじゃなくてupdateしてしまいそうだな。ちゃんと正しく bower --help update と打ってみよう。

$ bower --help update

Usage:

    bower update
    bower update <package>

Description:

    Refreshes a package install

なるほど。

やってみます。

$ bower ls
/home/hoge
└── jquery#1.8.0 (1.8.1 now available)

$ bower update
bower cloning git://github.com/components/jquery.git
bower cached git://github.com/components/jquery.git
bower fetching jquery
bower checking out jquery#1.8.1
bower copying /home/hoge/.bower/jquery

$ bower ls
/home/hoge
└── jquery#1.8.1

やはり、最新版に置き換わりました。

閑話休題: bower の意味

バウワーと聞いて、思わず「ジャック!」と叫んでしまいましたが、24 ジャック・バウアーのスペルはJack Bauerであって、bowerとは何の関係もありません。

ちなみに、こんな意味になるようです。

http://dictionary.goo.ne.jp/srch/all/bower/m0u/

bower

1 木陰;木陰の休息所;(庭園の)あずまや, 木立ち, 茂み.2 (中世の城中の)婦人の私室.━━…を(木の葉や枝で)囲い込む;木陰に隠す.

http://ejje.weblio.jp/content/bower

研究社 新英和中辞典

bower


音節bow・er 発音記号/bάʊɚ|bάʊə/音声を聞く
【名詞】【可算名詞】
1木陰; 木陰の休息所,あずまや.
用例

a shady bower 日陰のあずまや.
2《詩語》 =boudoir.
[古期英語で「私室」の意]

・・・、この記事のノリとは正反対のおもむき、、、;;