Web サイトを構築するには、CSS や JavaScript など、多くのライブラリに依存するのが一般的です。 たとえば、画像のスライドショーを表示する小さな Web サイトを構築する場合、Web サイトにはおそらく jQuery と jQuery プラグインである Flexslider が必要でしょう。 これらのライブラリは、Web サイトが機能するための依存関係です。

これらのライブラリを追加するのは簡単なはずですが、より多くのライブラリを必要とする大規模な Web サイトになると、すべてが面倒になり、最初から混乱する可能性があります。 1 つのリポジトリから別のリポジトリまで探し回り、各ライブラリをダウンロードし、パッケージを展開し、最終的にプロジェクト ディレクトリに配置しなければならないかもしれません。

新しいバージョンが利用可能になると、そのすべてを再び行う必要があります (大変そうでしょう)。 Animate.CSS – CSS3 Library To Create Animation Easily

もし、あなたがずっとやっていることのように思えるなら、この記事は一読の価値があるかもしれません。 ここでは、Web サイトのライブラリの管理を簡単にする Bower という便利なツールを紹介します。

入門

Bowerを使用するには、Node.jsをインストールする必要があります。 BowerはNode.jsをベースにしているので、あらゆるプラットフォームでBowerを動かすことができるはずです。

Node.jsをインストールしたら、ターミナル(またはコマンドプロンプト)を開き、このコマンドラインを実行してBowerをインストールします。

npm install -g bower

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

これで、Bowerを使用する準備が整いました。 まずは、プロジェクトディレクトリに置きたいライブラリを検索することから始めましょう。 現在ディレクトリの中にいると仮定して、bower search {name of the library}と入力します。

bower search normalize

コマンドはたくさんの結果をリストアップします。オリジナルの Normalize だけでなく、LESS、Sass、Stylus、その他のプラットフォームに変換された Normalize のバージョンも表示されます。 この例では、jQuery と同様に Normalize LESS もインストールします。

bower install normalize-less jquery

このコマンドは、最新バージョンの normalize-less と jQuery をダウンロードし、bower_components という名前の新しいフォルダーに保存します。

bower install jquery#1.10.0

これで、プロジェクトディレクトリに Normalize と jQuery というライブラリができましたので、HTML ドキュメントで bower_components フォルダから jQuery を参照し、もう一方の LESS スタイルシートで Normalize LESS をインポートすれば、それらを使用することができます。

in HTML

<script src="bower_components/jquery/jquery.min.js"></script>

in LESS

@import "bower_components/normalize-less/normalize.less";

いずれかのライブラリがWebサイトで使われなくなった場合、このようにbower uninstallコマンドで簡単にアンインストールすることが可能です。

bower uninstall normalize-less

Updating The Bower Components

数ヶ月間プロジェクトに取り組んでいて、使用しているいくつかのライブラリ(jQueryなど)が新しいバージョンをリリースしたとします。 この状況では、Bower を使用して jQuery を最新バージョンに更新することができます。 しかし、まずは新しいバージョンがbowerに登録されているかどうかをbower listコマンドで確認してみましょう。

以下のようにjQueryの最新バージョンは2.1.1です。

jQueryの更新はbower update jqueryと入力すればよいのですが、そのためには、

コマンドを入力します。 更新が完了したら、もう一度 bower list コマンドを実行して、現在インストールされているバージョンを確認できます。

Wrap Up

Bower は本当に便利なツールで、あなたのプロジェクトで活用するべきだと思います。 これは、AppStore を持つようなものですが、Web サイトのために、便利にライブラリをインストール、更新、削除することができます。 ご期待ください。

admin

コメントを残す

メールアドレスが公開されることはありません。

lg