デフォルト設定のままだと "bower_components" 配下にインストールされますが、インストール先のフォルダ名を変更したいケースがあるかと思います。 これに対して、Bower には ".bowerrc" という設定ファイルを準備することで パッケージインストール先 を変更できる仕組みがあります。 ここでは ".bowerrc" を利用して インストール先 を変更する方法を見ていきます。
目次
.bowerrc 概要
プロジェクトのルートディレクトリ直下に以下に載せるサンプルのような .bowerrc ファイル を作成します。 Bower 自体 に 作成するためのコマンドが存在しないので、普通にテキストエディタで作成して保存します。 ファイルは SHIF-JIS でも動きましたが、他の JavaScript ファイル にあわせて UTF-8 が望ましいと思います。
.bowerrc 自体 は配置さえされてしまえば即時反映されるため、配置以降の Bower コマンド 実行に反映されます。
配置先のサンプル
PROJECT_ROOT/ │ .bowerrc │ bower.json │ index.html │ ├─ library/ │ ├─ images/ │ ├─ javascripts/ │ └─ stylesheets/
.bowerrc サンプル
{
"directory": "library"
}
.bowerrc ファイル の設定項目は他にもありますがここでは取り上げていません。 詳しくは bower/spec を参照してください。
.bowerrc を 追加 反映 する タイミング
.bowerrcを作成、配置した後はその設定を反映させる手順になります。 設定反映には2つの状況「新規プロジェクト作成時に .bowerrc を追加する場合」と「既存プロジェクトに .bowerrc を追加する場合」があるかと思うので、 それぞれの場合について以下で見ていきます。
新規プロジェクト作成時に .bowerrc を追加する場合
新規プロジェクト作成時に最初から .bowerrc を考慮して進められると一番キレイだと思います。 ざっくりと作業手順は以下のようになるかと思います。
bower.json を作成するタイミングは .bowerrc を作成するタイミングや パッケージインストールするタイミング と前後しても問題ないと思いますが、 bower install を実行する前には作成しておかないと意味がありません。
- プロジェクトルートディレクトリを作成
- bower.json を作成
- .bowerrc を作成
bower installで必要なパッケージインストール
既存プロジェクトに .bowerrc を追加する場合
Bower で すでに パッケージ を インストール済み の場合、デフォルト保存先である "bower_components" 配下のファイルを 新しく指定したフォルダ 配下に移動します。
ファイルを移動した後は bower list を実行して Bower で認識できているかどうか確認します。
既存の場合はファイル配置場所が変わっているので HTMLファイル や CSSファイル の参照先を変更する必要もあります。
- .bowerrc を作成
- "bower_components" から 新しいディレクトリ配下 へ ファイル移動
bower listで 動作確認- HTMLファイルの scriptタグ、linkタグ を修正
最後に… このブログに興味を持っていただけた方は、 ぜひ 「Facebookページ に いいね！」または 「Twitter の フォロー」 お願いします！！