Go to Qiita Advent Calendar 2024 Top
LoginSignup
72
72

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

@toshirot(Toshiro Takahashi)

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

Last updated at Posted at 2012-09-12

これ入れてみた。
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 （中世の城中の）婦人の私室.━━動…を（木の葉や枝で）囲い込む；木陰に隠す.

研究社 新英和中辞典

###bower
１
音節bow・er 発音記号/bάʊɚ｜bάʊə/音声を聞く
【名詞】【可算名詞】
1木陰; 木陰の休息所，あずまや.
用例
a shady bower 日陰のあずまや.
2《詩語》 ＝boudoir.
［古期英語で「私室」の意］

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

72
72
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
72
72

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?