いろんなところで名前を見るBowerですが、どのようなものかきちんと理解していなかったので使い方を勉強してみました。とりあえずBowerについて調べてみると『Twitter社が開発したフロントエンド用のパッケージマネージャー』とのこと。Node.jsのnpmコマンドのようにbowerコマンドでパッケージを簡単にインストールできるみたいです。
Bowerのインストール
Bower自体はnpmコマンドを実行してインストールできるようになっていました。
npm install -g bower
とりあえず実行してみると次のエラーが...。
原因は管理者権限で実行されていなかっただけなので、先頭に『sudo』をつけて再度実行します。
sudo npm install -g bower
イメージしていたよりいろんな処理が実行されましたが、今度は無事にインストールできました。
バージョン確認コマンドの実行
とりあえずバージョン確認コマンドで確認してみます。
$ bower -v
無事にバージョンが表示されました。
installコマンドでjQueryのダウンロード
ここまでは問題なさそうなので、公式サイトで紹介されていたjQueryのインストールコマンドを試してみます。デモ用にフォルダを用意してcdコマンドで移動、そこでインストールコマンドを実行してみました。
$ bower install jquery
こんな感じでダウンロード処理が実行されます。
ダウンロード処理は短時間で行われました。処理終了後、対象フォルダを覗いてみるとjQueryのファイル一式がダウンロードされていました。
GitHubからダウンロード
次のコマンドでGitHubからもダウンロードできるみたいなので確認してみました。
$ bower install git://github.com/user/package.git
このURLはGitHubのSSH Clone URLから確認できました。
実行時にSSHのパスワードを聞かれましたが正常に実行できました。
ダウンロードしたファイル一式はこんな感じです。
こんな感じでbowerコマンドで簡単に必要なファイルをダウンロードできました。
Search Bower packages
Bowerで利用できるパッケージはjQuery以外にもたくさん用意されています。どんなパッケージがあるかは『Search Bower packages』のページで確認できるみたいです。
このページはヘッダーのSearch Packagesのリンクから表示できます。例えば次のパッケージが用意されていました。
- bootstrap
- angular-latest
- d3
- animate.css
- chosen
- normalize.css
- ionic
- jquery-mobile
確認したときには全部で738ページ分用意されていました。
欲しいものが決まっている場合、検索ボックスから探すこともできます。
インストールするときはjQueryと同じようにコマンドを実行します。例えばBootstrapの場合はこんな感じです。
$ bower install bootstrap
Bowerコマンドでダウンロードしたファイルは『bower_components』フォルダにまとめられるみたいです。
とりあえず基本的な使い方はこんな感じでした。すごく便利なのできちんと活用していけるようになりたいと思います。