ビギナーズガイド。 Bowerパッケージマネージャを始める

Bower はTwitterによって作られたフロントエンドパッケージマネージャです。 Web 用のパッケージ マネージャーとしても知られている bower は、現代のオープン ソースおよびクローズド ソース プロジェクトで、多くの再発する問題を解決するために使用されています。

この記事では、bower の基本的な使用法とチーム環境での高度な使用法について説明します。

bower が解決する問題

最近のウェブサイトやウェブアプリケーションの開発には、Bootstrap、jQuery、Angular など、多くのフロントエンド フレームワークの使用が必要です。

1. これらのパッケージをそれぞれダウンロードするには、対応するウェブサイトをナビゲートして適切なバージョンを見つけてダウンロードし、解凍して、最後にメインファイルをベンダー フォルダーに移動することが必要となります。 (例: jquery パッケージの main ファイルは jquery.js です)
2. リポジトリにファイルをダウンロードした後、上記のすべての Web サイト (jquery.com, angularjs.com, bootstrap.com) に手動でアクセスして更新をチェックしなければならず、どうしたと思いますか? 更新がある場合は、各パッケージ/更新に対してステップ 1 を繰り返す必要があります。
3. ここで、jQuery を必要とする Bootstrap を使用すると仮定しましょう (依存関係と呼ばれます)。 getbootstrap.com に行ってダウンロードすると、次に jquery.com に移動して jquery もダウンロードしなければなりません。

まとめると、bower はフロントエンドパッケージを管理するのに役立ちます。 bower を使用する利点は他にもあり、この記事の後半で説明しますが、これらは bower が私たちのために解決してくれる主な問題点です!

インストールと使用

bower のインストール

Bower は node モジュールで、次のコマンドでインストールできます:

npm install -g bower

これで bower はシステム上にグローバルにインストールされます。

コンピューターに node がインストールされていない場合、nodejs.org からダウンロードする必要があります。

Installing packages

このチュートリアルのために、bower を使用して bootstrap をインストールします。

bower install bootstrap

これは、新しく作成された /bower_components フォルダー (ルートレベル) に bootstrap をインストールします。

この記事を書いた時点では最新バージョンである bootstrap 3.2.x をインストールしようとしていることに注意してください。 2.x の最新版をインストールしたい場合は、

bower install bootstrap#2

を実行する必要があります。また、

bower install bootstrap#2.2

で正確なバージョンを指定することもできます。また、bootstrap は jQuery に依存しているので、前のコマンドのいずれかを実行すると bootstrap の依存を解決するために、自動的に jQuery もインストールします。

パッケージの更新

すべてのパッケージを更新したい場合、次のコマンドを実行する必要があります:

bower update

スクリプトの組み込み

最後の手順は、ダウンロードしたスタイルとスクリプトを組み込むことです。 これらはすべて /bower_components フォルダ内に存在するので、次のように記述する必要があります。

<link rel="stylesheet" type="text/css" ref="bower_components/bootstrap/dist/css/bootstrap.css"><script src="bower_components/jquery/dist/jquery.js"></script><script src="bower_components/jquery/dist/js/bootstrap.js"></script>

チーム環境での一般的なワークフロー

上記の最小限の方法で bower を使用した後、ソース管理および/またはチーム環境での作業時に新しい問題を引き起こすことに気づきました。

また、主な配布ファイル (dist/jquery.js, dist/css/bootstrap.css) は minify されず、bower は配布ファイルを minify しないので、ビルドツールではなくパッケージマネージャだからです。

新しいパッケージごとに新しい <script> タグを手動で追加しなければなりません (そして、css ファイルを含む場合は、新しい <link rel=”stylesheet”/> を追加するかもしれません)。

ステップ 1: bower

をインストールし、チームのすべての人が同様にグローバルにインストールすることを確認します。

ステップ 2: bower_components from revision control

bower_componentsを.gitignoreに追加してください。 これにより、Git は bower_components ファイルをすべて無視するように指示されます。 このようにして、（チーム内の）各開発者は、必要なフロントエンドライブラリのローカルコピーを持つことになります。 各開発者が異なるバージョンを持っていることについては心配しないでください。

Step 3: Install the required packages

Install the required front-end packages, let’s say jQuery and bootstrap.

bower install jquery#1 bootstrap --save

The --save flag will instruct bower to create a bower.json file (if it is not exist) and include the installed packages in it.もしファイルがなければ、bower はその中にインストールしたパッケージを含めるように指示します。

{ "name": "package name", "version": "2.9.0", "private": true, "dependencies": { "bootstrap": "~3.2.0", "jquery": "1", }}

バージョン制約 ~3.2.0 があることに注意してください。 これは、チームメンバー全員が同じバージョンの bootstrap で作業することを保証します。チルダは、指定された理由に適度に近い理由であることを意味します。

ステップ 4: チームメンバーが実行できるようになりました。bower install

リポジトリにアクセスできる開発者が bower install を実行すると、すべての依存関係をインストールします (このケースでは bootstrap と jquery)。

残りのステップでは、Grunt または Gulp が必要です。

ステップ 5: ビルド ツールとの統合

Grunt と Gulp は、スクリプトの最小化、画像の最適化、スタイルシートの最小化、 less/sass/stylus のコンパイルなど、一般的で反復するタスクを自動化するために使用されるビルド ツールです。 Bowerは、Grunt/Gulpのプラグインが用意されているため、Grunt/Gulpとうまく連動します。

Gruntには、grunt-bower-concatというプラグインがあり、あなたが持っている各bowerコンポーネントのすべてのメインファイルをbower.jsファイルにコンパイルしてくれます。

Grunt bower concat sample configuration:

bower_concat:{ all: { dest: "src/js/vendor/bower.js", destCss: "src/css/vendor/bower.css" }},

注：Gulpを使用している場合、同様のプラグインが以下に存在します。 https://github.com/ck86/main-bower-files/

注意: Ruby on Rails などの場合は、次のリンクを確認してください。 http://bower.io/docs/tools/

Step 6: Include scripts

以下のスクリプトで、一度スクリプトをインクルードすると、新しいフロントエンドパッケージを追加するたびに、自動的に該当ファイル (bower.css or bower.js)

<link rel="stylesheet" type="text/css" ref="src/css/vendor/bower.css"><script src="src/js/vendor/bower.js"></script>

Step 7: More bower automation

Bower をさらに自動化することが可能です。 例えば、あなたがチームで仕事をしていて、新しいbowerコンポーネント(bower install typeahead.js)を追加したとします。 あなたは、bower installを実行するようにと全員にメールを送りたくないでしょう。 grunt-watch と grunt-exec:

watch: { less: { files: , tasks: },},exec: { bower_install: { cmd: "bower install" }}

ここで起こっていることは、あなたが bower.json ファイルを編集するたびに、grunt は自動的に bower install コマンドを実行するということです。

How I customize bower in my own workflow

When it comes to the package manager, I use a lot of them in my workflow.私は、自分のワークフローでbowerをカスタマイズしています。 grunt とそのプラグインを管理するために npm を使用しています。 Composer は PHP ベンダー ライブラリを管理し、bower はフロントエンド パッケージを管理し、最後に ruby gems は Capistrano (デプロイを自動化するために使用されるパッケージ) を管理します。 そこで、すべての主要なコマンドを package.json のスクリプト セクションで囲み始めました。 たとえば、

• npm run migrate: データベースの移行と移行ファイルの生成 (PHP 固有)
• npm test: ユニットテストの実行
• npm run protractor: 終了-終了テストの実行
• npm run deploy-staging: ユニットテストの実行。 deploys code to staging machines
• npm run deploy-production: deploys code to production machines
• npm start: runs npm install (pre-start), bower update (post-install) and finally grunt

ここで、舞台裏では何が起こっているか見ていきましょう。 次の package.json ファイルを考えてみましょう:

{ "name": "test project", "version": "2.9.0", "private": true, "devDependencies": { "bower": "^1.3.9", "grunt-bower-concat": "^0.4.0", "grunt-contrib-uglify": "^0.5.1", "grunt-contrib-watch": "^0.6.1", "grunt-exec": "^0.4.6", }, "scripts": { "prestart": "npm install", "postinstall": "bower update --unsafe-perm", "start": "grunt" }}

スクリプトのセクションを見ると、prestart: では npm install を実行していることがわかります。 package.json は私たちのリポジトリに含まれているため、誰かが新しい devDependency を追加した場合、同じバージョンを簡単にインストールできるようにする必要があります。 (pre start は npm start を実行したときに最初に起動するコマンドであることに注意してください).

post install (npm install で起動する) では、次のコマンドを実行しています。 bower update --unsafe-perm (--unsafe-perm は Mac で bower-update が失敗したので追加しただけです)。

start: そして最後に start コマンドが grunt を実行します。

このセットアップにより、チームの開発者がプロジェクトで作業を始めたいときはいつでも、単にプロジェクト ディレクトリに移動して npm start を実行してすぐに作業を始めることができます。

このアプローチを使用すると、npm run migrate、npm run deploy-staging などの npm から実行する他のスクリプトを含めることができるので、非常に効果的です。

このアプローチを使用すると、コマンド ライン使用と自動化を促進するだけではなく、実際にそれを均一化しています。 これをさらに進めて、他のすべてのパッケージマネージャを npm install とバインドすることができます。 この場合、npm install を実行すると、以下のすべてのコマンドが実行されます:

• bower update
• composer update --no-dev
• gem update

まとめ

Bower は現代の Web アプリケーションにおける基本的な問題を解決する、素晴らしいツールです。 すべての人がこれを使用することが推奨されます (そして、新しい Visual Studio にも Bower と Grunt/Gulp が同梱されています)。

単独で開発する場合は簡単にセットアップできますが、チームで作業する場合は、チーム内のすべての開発者間の円滑なワークフローを確保するために、この記事で紹介した手順を実行する必要があります。