LoginSignup
501

More than 5 years have passed since last update.

Bowerまとめ(概要・導入・コマンド一覧)

Last updated at Posted at 2014-06-12

★★ bower list --paths でソースマッピングが確認できる。変更するにはどうすればいい?

本家サイト:Bower - A package manager for the web

BowerはJavaScript,CSS,HTMLなどを依存関係を含めて管理してくれる、フロントエンド用パッケージ管理ツール。Twitter製

各パッケージにある設定ファイル"bower.json"に依存パッケージが記述されており、インストール時に依存パッケージを含めて読み込む仕組み。プロジェクトディレクトリ内にbower.json があれば、そのプロジェクトはBower対応しているはず(Githubで今人気のライブラリを見てみると、ほぼ"bower.json"がある)。

環境構築時にプロジェクトに設定ファイル"bower.json"を置けば、それに記述されたパッケージ(依存パッケージ含む)を1コマンドで自動一括インストールすることもできる。

Yeoman(ひな形作成ツール)を構成するツールのひとつでもある。

この記事では、公開目的のBower対応パッケージを作って公開する方法には触れていない。
良さ気な記事 → bowerにパッケージを公開する方法

Bower自身のインストール

node.js, npm がインストール(インストール手順)されていることが前提。
コマンド操作するのでグローバルにインストール

インストール(グローバル)
npm install -g bower

使ってみる

"bower_test"ディレクトリが、プロジェクトのルートということで進める。
以下ターミナルでの操作。

初期化

bower_testディレクトリ にいる状態で初期化コマンド bower init

質問(詳細はこのページ下の「初期化時の質問」を参照)に答えていくことで、設定ファイル"bower.json"を自動作成してくれる。

パッケージをインストールしてみる

今回は、Modernizr,jQuery,normalize.cssをインストールしてみる

bower install modernizr jQuery normalize.css --save

結果

  • bower_test/bower_componentsディレクトリの中に各パッケージが依存パッケージも含めてインストールされた
  • --save オプションを付けているので、設定ファイル bower.json の dependencies(依存)に追記された

bower.json で、新プロジェクトに一括インストール

設定ファイル"bower.json"があれば、その記述にある全パッケージ(依存含む)をコマンドひとつで復元可能。
つまり、新プロジェクト開始時や配布時に超便利。

理解のためのサンプル操作

  1. 新しいプロジェクトのディレクトリ "bower_test2" を新規作成
  2. 上記「パッケージをインストールしてみる」の項で作った bower_test 内の bower.json を bower_test2 にコピー
  3. ターミナルで bower_test2 に移動し bower install
  4. bower.jsonに記述されたパッケージが依存パッケージも含めて一括インストールされた

コマンド

同じパッケージ(バージョン違いも)をインストールすると上書き(置き換え)になる

パッケージのインストール/アンインストール

bower install パッケージ名 最新バージョンをインストール
bower install パッケージ名#バージョン 特定バージョンのインストール
bower install http://code.jquery.com/jquery-1.10.1.js Bowerに未登録のパッケージ
bower install パッケージ名1 パッケージ名2 複数を同時にインストール
bower install パッケージ名 --save インストール & bower.jsonに依存関係(dependencies)を記述
bower install パッケージ名 --save-dev 開発中にしか使わないモジュールの場合はこれ

bower uninstall パッケージ名 アンインストール
bower uninstall パッケージ名 --save アンインストール & bower.jsonのリストから削除
bower uninstall パッケージ名 --save-dev 開発中にしか使わないモジュールの場合

パッケージのアップデート、指定バージョンに置き換え

bower update インストールされたパッケージをまとめてアップデート
bower install パッケージ名#バージョン 特定バージョンを新たにインストールで上書き
bower install 名前=パッケージ名#バージョン 名前を付けて特定バージョンを新たにインストール

bower.json を参照し、一括インストール

bower install bower.jsonに記述したパッケージ(依存パッケージも再帰的に含む)をインストール
bower install --production 開発用(--save-dev オプションを付けたの)を除いてインストール

その他

bower search Bower登録された全パッケージ一覧を表示
bower search [検索キーワード] キーワードでパッケージ検索
bower list インストールされたパッケージの一覧を表示。新バージョン出てたらそれも表示
npm update -g bower bower自身のアップデート(新Ver出てたら、上の bower list で促される)
bower info パッケージ名 バージョンや情報を確認
bower -v Bower自身のバージョン確認

関連ツール

  • gulp-bower-files bower.jsonに記述のmainだけ抜き出すことができる(mainのオーバーライドも可)。gulpやgruntなどの自動化ツールで活用できる
  • CodeKit Bowerもサポート。GUIで操作

インストール先ディレクトリの変更(必要なら)

.bowerrc(不可視ファイル、無ければ新規作成)に以下を記述
{"directory": "インストール先ディレクトリのパス"} 例:public/bower_components

初期化時の質問

矢印はテスト用入れた答え。適宜変更すること

[?] May bower anonymously report usage statistics to improve the tool over time? (Y/n)
意訳)Bower改善のため、匿名でユーザーの使用統計を繰り返し取得しますけどいいですか?→ Y(初回のみ聞かれる)

[?] name: (bower_test) プロジェクト名 → Test Project
[?] version: バージョン → 0.0.1
[?] description: 説明 → このプロジェクトの説明
[?] main file: メインファイル → index.html

[?] what types of modules does this package expose? (Press <space> to select)
❯⬡ amd
 ⬡ es6
 ⬡ globals
 ⬡ node
 ⬡ yui

このパッケージは、どんなモジュールにさらされますか? → チェック付けずEnter
(AMDはJSのコードをモジュールとして定義し非同期ないし遅延ロードするための仕組み、ES6はECMAScript6、globalsはわからん、yuiはYahoo!のUIライブラリ)

[?] keywords: キーワード → キーワード1,キーワード2
[?] authors: (ユーザー名 <Eメール>) 著作者 → そのままEnter
[?] license: (MIT) ライセンス → そのままEnter
[?] homepage: 解説ページ? → http://解説ページURL

[?] set currently installed components as dependencies? (Y/n) 

現状インストールされているコンポーネントの依存ファイルもセットしますか? → Y

[?] add commonly ignored files to ignore list? (Y/n) 通常無視するファイルを無視リストに追加しますか? → Y

[?] would you like to mark this package as private which prevents it from being accidentally published to the registry? (y/N)

このパッケージを誤ってレジストリに発行されるのを妨げるプライベートとしてマークしますか? → Y

設定コードが表示され、
[?] Looks good? (Y/n) これでええの? → Y

Yesで、bower_testディレクトリに "bower.json" が作成される。

参考記事

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
501