Bower の パッケージ インストール先 を 変更する 方法

0 件のコメント

デフォルト設定のままだと "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 サンプル

1
2
3
{
  "directory": "library"
}

.bowerrc ファイル の設定項目は他にもありますがここでは取り上げていません。 詳しくは bower/spec を参照してください。

.bowerrc を 追加 反映 する タイミング

.bowerrcを作成、配置した後はその設定を反映させる手順になります。 設定反映には2つの状況「新規プロジェクト作成時に .bowerrc を追加する場合」と「既存プロジェクトに .bowerrc を追加する場合」があるかと思うので、 それぞれの場合について以下で見ていきます。

新規プロジェクト作成時に .bowerrc を追加する場合

新規プロジェクト作成時に最初から .bowerrc を考慮して進められると一番キレイだと思います。 ざっくりと作業手順は以下のようになるかと思います。

bower.json を作成するタイミングは .bowerrc を作成するタイミングや パッケージインストールするタイミング と前後しても問題ないと思いますが、 bower install を実行する前には作成しておかないと意味がありません。

  1. プロジェクトルートディレクトリを作成
  2. bower.json を作成
  3. .bowerrc を作成
  4. bower install で必要なパッケージインストール

既存プロジェクトに .bowerrc を追加する場合

Bower で すでに パッケージ を インストール済み の場合、デフォルト保存先である "bower_components" 配下のファイルを 新しく指定したフォルダ 配下に移動します。 ファイルを移動した後は bower list を実行して Bower で認識できているかどうか確認します。 既存の場合はファイル配置場所が変わっているので HTMLファイル や CSSファイル の参照先を変更する必要もあります。

  1. .bowerrc を作成
  2. "bower_components" から 新しいディレクトリ配下 へ ファイル移動
  3. bower list で 動作確認
  4. HTMLファイルの scriptタグ、linkタグ を修正

最後に… このブログに興味を持っていただけた方は、 ぜひ 「Facebookページ に いいね!」または 「Twitter の フォロー」 お願いします!!