POSTS

bowerを導入した 〜gulpを添えて〜

今更ながらbowerをつかってみました。

bowerについて

Twitter製のフロントエンドパッケージマネージャです。 Node.jsのnpmのフロント版ツールという認識でいいと思います。

なぜ導入したか

クライアントサイドで新しいライブラリを入れようとソースをコピペする作業をした瞬に。。。

必要なもの

  • $ npm install bower -g グローバルでインストールします。
  • bower.json このJSONファイルに管理したいファイルパスやバージョンなどを書いていきます。
  • .bowerrc ルートディレクトリ以外にbower.jsonを置きたい時や、bower.jsonに記載したファイルの置き場所を指定したい時に使います。 Configuration · Bowerこちらに設定一覧があります。

管理するディレクトリを設定する

.bowerrcファイルをrootに作る

{
    // bower管理したいディレクトリ
    "directory": "bower_components/"
}

使いたいライブラリにタグが存在しない

(例)

{
  "dependencies": {
    // ライブラリにbower.jsonが存在しタグで管理されていればバージョン番号を指定するば良い
    "TweenJS": "0.4.1",
    "PreloadJS": "0.3.1",
    // そうでない場合はコミットのハッシュ値で管理する
    "EaselJS": "http://github.com/thammin/EaselJS.git#5e61534164"
  }
}

$ bower install nameの後に、パスを書かないといけない

ck86/main-bower-files · GitHubでbower.jsonファイルを読み、dependenciesで定義した、パッケージのコアファイルを返します。 色々調べましたが、main-bower-files以外を使っているのを見けませんでした。

{
    "overrides": {
        "BOWER-PACKAGE": {
            // gulpを使ってdistしたいファイル名を書いておく(bower_components内のライブラリのファイルのパスです)
            "main": "lib/hogejs-*.*.*.min.js",
            // 配列で複数指定も可
            "main": [
              "lib/hogeljs-*.*.*.min.js",
              "lib/fugaljs-*.*.*.min.js"
            ]
        }
    }
}