bowerを使ってみた

概要

bowerを使ってみました、これはフロントエンド用のパッケージ管理ソフト的なものです。
cssやjavascriptを簡単にインストールしたり、削除したりできます。
定義ファイルさえあれば、一括でインストールしてくれたり、削除したりできるので便利です。

インストール

npmコマンドでインストールできます。nodejsもないと使えないのでnodejsも入れておきます。
npmコマンドの -g オプションはグローバルインストールの意味です。

npm install -g bower

使ってみる

jqueryをダウンロードしてみます。

bower install jquery

コマンドを実行したディレクトリ配下にbower_componentsができて、その配下に配置されます。

bootstrapをダウンロードしてみます。

bower install bootstrap

同じようにbower_componentの配下に配置されます。
githubから取ってきているようで、readme.mdなどのファイルも一緒に入ってくるようです。

bower.json

npmのpackage.jsonのような感じで、jsonにてインストールしたjs,cssライブラリの管理ができます。
インストールしたディレクトリで bower init を実行すると質問形式でjsonファイルを作成できます。
先ほどインストールしたディレクトリで実行すると下記のようになりました。

{
  "name": "src",
  "homepage": "https://github.com/mattandersen/vagrant-lamp",
  "description": "",
  "main": "",
  "license": "MIT",
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "test",
    "tests"
  ],
  "dependencies": {
    "bootstrap": "^3.3.7",
    "jquery": "^3.2.1"
  }
}

bower.jsonがあれば他の環境でライブラリを未インスールの場合も一括インストールできます。
消して確認します。

rm -rf bower_components/
bower install

上記で、ライブラリを指定しなくてもjsonを読み取ってインストールされていることが確認できます。
gitなどで管理している場合にbower.jsonさえ入れておけば、他の人がpullした場合もbower installで再インストールすればOKなので、
ライブラリは一緒に管理しなくていいので便利かと思います。

bower.jsonにインストール時に追加するには bower install –save を使います。

bower install --save momentjs

としてインストールすると追加したライブラリが、jsonファイルに書き込まれます。

検索する場合はbower searchを使います。

bower search enchant

とすればenchant(キーワード)を含むリポジトリを検索できます。

まとめ

・bower install でライブラリインストール
・bower.jsonでライブラリを管理、一括インストールが簡単にできる
・–saveをつけると、jsonファイルに書き込んでくれる
・bower searchでライブラリを検索できる。(正規表現は使えない。あいまい検索でキーワードを含むものがでてくる。)

参考URL

Bowerまとめ(概要・導入・コマンド一覧)
Bower(フロントエンド用パッケージマネージャー)の導入方法と使い方

コメントを書いてみる

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です