読者です 読者をやめる 読者になる 読者になる

Develop and Design Note

フロントエンドなデザイナーの覚書

Bowerを導入してみた

開発環境の効率化ツールとして、前回のGulpに続き、「Bower」を導入してみました。

BowerはTwitter社が提供する、クライアントサイドのパッケージマネージャーで、簡単に言うと、jQueryなどの「ライブラリを便利に管理するツール」です。

この辺りの資料を参考にしました。

Bowerの導入

BowerはNode.jsで動くので、事前にNode.jsをインストールしておく必要があります。

手順 コマンド
1 Bowerのインストール sudo npm install -g bower
2 サイトのファイル一式があるディレクトリに移動 cd fuga
3 Bowerの初期化(bower.jsonの作成) ※1 bower init

※1 このコマンドを打つと、いくつか質問をされますが、全てEnterでOK。
とはいえ、質問の内容が気になったので、こちらを参考にしました。

bower.jsonにはこれから追加していくライブラリの名前が追記されていきます。

ライブラリのインストール他

ライブラリのインストール、アンインストール、アップデートは以下のコマンドを使います。

手順 コマンド
ライブラリをインストール bower install ライブラリ名 --save
ライブラリをインストール bower uninstall ライブラリ名 --save
ライブラリをアップデート bower update ライブラリ名
全てのライブラリをアップデート bower update

Bowerで管理するライブラリは全て「bower_components」というディレクトリに保存されていきます。
インストール自体は、GitHubからgit cloneで持ってきているだけのようです。
なので、例えば、jQueryをインストールした場合は、JavaScript以外にもたくさんのファイルがインストールされます。

どうやら、フォルダ構造を指定したり、特定のファイルだけをインストールするのは、まだBowerではできないようです。

現実的な使い方としては、ライブラリは全て「bower_components」に格納して、必要なファイルだけ任意のフォルダにコピペする、という方法になりそう。

う〜む、おしい。