以下は、Helios Design Labs の Dan Sundy によるゲスト投稿です。
私が最初に Bower を使い始めたとき、その魅力はよくわかりませんでした。 “マジかよ” と。 と思いました。 “ファイルをダウンロードして解凍するのが面倒くさい?” と。 また、Git、Grunt、Gulp、Jekyll、Node などですでに膨らんでいた脳に、たくさんの新しいコマンドを詰め込むことにもあまり興奮しませんでした。
半年前のバージョンの自分に伝えたいことが2つあります。 まず、Bower はファイルを 1 つまたは 2 つダウンロードするよりも少し多くのことを行うことができます。 2 つ目は、繰り返しのタスクを排除するツールを学ぶのに 1 時間費やすことは価値があるということです。
まず最初に。 Bower とは一体何なのか。
初心者のために説明すると、Bower はパッケージマネージャーです。 これは、外部の作者に依存するパッケージの管理に優れています。 良い例としては、Bootstrap のような CSS フレームワーク、jQuery のようなライブラリ、jQuery プラグイン、または Angular のような JavaScript フレームワークがあります。 Bower の公式 Web サイトである Bower.io は、おそらく次のように最もよく説明しています：
Webサイトは、フレームワーク、ライブラリ、アセット、ユーティリティ、虹など多くのものから構成されています。
前提条件
Bowerで作業を開始する前に必要なものがいくつかあります。
Bowerをグローバルにインストールするには：
$ npm install -g bower注意：あなたの設定によっては、`sudo npm install -g bower`を使ってグローバルにインストールする必要があるかもしれません。 私の場合、通常は次のようになります。
|-.git/|-dist/|-node_modules/|-src/| |-assets/| |-css/| |-fonts/| |-js/| | |-lib/| | |-main.js| || |-sass/| | |-style.sass| || |-index.html||-.gitignore|-gulpfile.js|-package.json|-README.md開発の大部分が行われる `src` フォルダがあります。 Gulp ビルド タスクは最終的にすべてを準備し、最適化されたコードを量産可能な `dist` フォルダにコンパイルします。
このプロジェクトに jQuery を含めるとします。 通常、jquery.com に行き、正しいダウンロード リンクを見つけてクリックし、解凍して正しいディレクトリにファイルを配置します。
Bower では、次のコマンドを実行するだけです。
$ bower install jqueryこれで、`jquery` フォルダーを含む `bower_components` ディレクトリが作成されました。 ほとんどの人気のあるライブラリやフレームワークも同じことをしています。 もし、欲しい資産が Bower パッケージであることを確認したい場合は、検索を行うことができます:
$ bower search <package-name>もし、登録されていない場合でも、このように git endpoints でリポジトリを取得することができます:
$ bower install git://github.com/example-user/example-package.git上級者向けです。 もっと凝りたいのであれば、自分がアクセスできるプライベートなレポをインストールすることもできます。 Rob Dodson によるビデオ チュートリアルをご覧ください。
インストールしたアセットを表示および管理するために使用できる他の基本的なコマンドをいくつか紹介します。
すべてのパッケージを一覧表示する:
$ bower listインストールしたパッケージの情報を取得する:
$ bower info <package-name>更新の有無を確認する:
$ bower check-newそして更新があればパッケージを更新する:
$ bower update <package-name>でも、最新バージョンに更新したために何か壊れたかもしれませんね。
特定のバージョン(old or new-with)をインストールする。
$ bower install <package-name>#<version>これは間違いなく完全なリストではありません。 もし始めようと思っているのなら、テストプロジェクトを作成し、オンラインで見つけられる多くのチュートリアルのうちの1つで作業することをお勧めします。 Treehouse によるこのチュートリアルは素晴らしいものです。 Bower入門
Hey, But Wait, There’s More!
私が働いている小さな開発チームは、過去1年ほど Bower を使用しています。 コマンドラインによるパッケージ管理は素晴らしいものでしたが、`bower.json` と `.bowerrc` ファイルを使い始めるまで、私は納得できませんでした。
.bowerrc
`.bowerrc` ファイルは多くのことができますが、私は主に `bower_components` ディレクトリの名前と場所を変更するために使うのを見ています。 (
以下は `.bowerrc` ファイルの例です。
{ "directory": "src/components"}ディレクトリオプションは、パッケージを最も意味のある場所、この場合は `src/` ディレクトリに送信します。 新しいプロジェクト構造を見てみましょう。
|-.git/|-dist/|-node_modules/|-src/| |-assets/| |-components/| | |-jquery/| || |-css/| |-fonts/| |-js/| | |-lib/| | |-main.js| || |-sass/| | |-style.sass| || |-index.html||-.gitignore|-.bowerrc|-gulpfile.js|-package.json|-README.md注意点としては、`bower_components/` フォルダーがなくなり、`src/` ディレクトリに `components/` フォルダーができました。
では、`bower.json`ファイルはどのように私たちを助けてくれるのでしょうか。
bower.json
`bower.json` ファイルは、Node の `package.json` によく似ています。 これは、オプションを指定するためのマニフェストファイルです。
{ "name": "bower-example", "version": "0.0.0", "authors": >" ], "description": "An example project using bower.", "main": "index.html", "license": "MIT", "private": true, "ignore": , "devDependencies": { "jquery": "~2.1.1" }}これらのオプションの多くは、このレポを Bower パッケージとして登録するために存在します。 しかし、一番下にある devDependencies オブジェクトが見えますか？ このオブジェクトは、次のように Bower コマンドに --save-dev を追加すると、自動的に更新されます:
$ bower install jquery --save-devここで、他のコーダーが `bower install` を実行すると、コンピューターは devDependencies のリストにあるものをすべて `.bowerrc` で指定したフォルダーにインストールすることになるでしょう。 同様に、ある開発者が --save-dev を使ってパッケージを追加したり、パッケージのバージョンを更新した場合、チーム全体は bower install を使って (`bower.json` ファイルの最新版を取得した後に) アセットを同期させることができます。
すべての探索と収集作業は `bower.json` ファイルにより排除されているので、もはやこれらのアセットはどれもバージョン管理する必要がなくなりました。 Components/` フォルダーを `.gitignore` ファイルに追加することで、リポジトリをスリムに保つことができます。
*.DS_Store.sass-cachenode_modules/dist/src/components/Parting Shot
私のお気に入りの Web 開発ポッドキャスト (wink, wink) を聞いていたとき、ホストが Bower が実際に役に立つのか、単なる一時の流行なのかについてチャットしていました。 彼らは、そのポイントはダウンロードを容易にすることなのか、それとも ruby gems が行うようにライブラリのバージョンを更新するために使用されるのか、疑問に思っていました。 彼らは、それが “front-endy NPM” であることについて話していました(私は言い換えました)。
素晴らしいのは、これらすべてのことを行えることです。 コードのダウンロードと更新の維持に使用できますが、それをさらに推し進めることができます。 Bower は、プロジェクトのライブラリとフレームワークを同期させるのに役立ち、また、開発セットアップからさらに時間を削減するために Yeoman のような他のツールと統合することができます。 さらに、独自の Bower パッケージを作成して登録し、すべてのプロジェクトでそれらをすばやく (そして安全に) インストールおよび更新することができます。 WordPress は `bower_components` フォルダーにあるべきものではありません。 しかし、外部アセットを管理するためにWordPressテーマ内でBowerを使用することはできます（WordPressコアにすでに含まれているjQueryのようなライブラリをロードしないようにすればよいです）。