こんにちは、おじいちゃんです。
今回はTwitter社が作成しているフロントエンド用パッケージマネージャー、Bowerの導入方法と使い方について説明したいと思います。
Bowerとは
Twitter社が作ったフロントエンド用のパッケージマネージャで、必要なライブラリを簡単にインストールすることができます。
可愛いロゴですね。
Bowerをインストールするには、Node.jsのインストールが必要になります。
Node.jsのインストール方法については、下記の記事を参考に導入してみてください。
「いまアツいJavaScript！ゼロから始めるNode.js入門〜5分で環境構築編〜」
Bowerをインストール
それでは、npmを使ってBowerをインストールしてみましょう。
ターミナルを起動して下記コマンドを実行してみてください。
npm install bower -gこれでBowerのインストールが終わりました。
下記コマンドを実行すると、インストールしたBowerのバージョンが分かります。
bower -vbower.jsonを作成
まずはBowerから追加したライブラリ情報を保存してくれる、bower.jsonを作成しましょう。bower.jsonを作ることで、保存したライブラリを一括でインストールすることができます。
下記コマンドでbower.jsonを作成してみてください。
bower initいくつか質問されますが今回はすべてEnterで問題ありません。
質問に関しては下記記事にまとめられているので確認してみてください。
Bowerまとめ（概要・導入・コマンド一覧）
http://qiita.com/oreo3@github/items/eb790fc091aa28af8d33
質問にすべて答えるとbower.jsonが作成されます。
ライブラリをインストール
jQueryをインストールしてみましょう。
bower install jquery --savebower_componentsフォルダが作成されて、jQueryが追加されます。
このようにして簡単にライブラリをインストールすることができます。
ライブラリインストール時に–saveを追記してあげることで、インストールしたいライブラリ情報がbower.jsonに追加されます。
同じ手順で、使用したいライブラリを追加していきましょう。
bower.jsonに追記したライブラリをすべてインストールするには、下記コマンドを入力してください。
bower installその他コマンド
- ライブラリのバージョンを指定
bower install ライブラリ名#バージョン- ライブラリを検索
bower search ライブラリ名- キーワードから該当するものを選出
bower lookup ライブラリ名- bower.jsonに記載されているライブラリを確認
bower listまとめ
以上がBowerの導入方法と簡単な使い方になります。
Bowerを使って、よりよい開発環境作りをしてみてはいかがでしょうか。
それでは、また！
【おじいちゃん25歳、開発中】
※ Web制作の作業を効率化するための自動化ツールGruntの導入方法とおすすめプラグインまとめ
※ ブラウザ対応が簡単に！「modernizr.js」の機能と利用方法
※ アニメーションを実装するなら知っておきたい「requestAnimationFrame」の使い方
※ Google Mapsの地図に目的地までのルートをJavaScriptで描画する方法
LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。
