my story blog

JavaScriptとかRubyの技術的なことを書きたい

bowerでインストールしたファイルの配置を設定するにはgrunt-bower-taskが便利

bowerのファイル構成。デフォルトのbowerでinstallするだけだと、 (デフォルトの設定で)bower_compornentにそのライブラリのディレクトリとファイルが配置されるだけ。

プロジェクトでjs/cssを使いたい場合はその中から特定のファイルを取り出して、プロジェクト用のディレクトリに配置してそこから呼び出すようにしたい。

そこでgruntとgrunt-bower-taskを使っていい感じにjs/cssファイルを配置する方法を調べてみました。

grunt-bower-task インストールと設定

grunt-bower-taskのインストールはこちらのGithubのREADMEを参考にしてください。

bower.jsonGruntfile.jsを作成し、以下のコマンドを実行することで bowerでのインストールと指定したディレクトリへの配置を自動で行ってくれます。

$ grunt bower:install

grunt-bower-taskのoptions.layout

本題はここからで、optionのlayoutによって targetDir以下のディレクトリ・ファイルの構成を指定ます。

マニュアルにも書いてあるのですが、 種類はbyTypebyComponent独自のfunctionの3つがあります。

今回bowerでインストールするライブラリはangularJSとbootstrapとし、bootstrapに依存したjqueryもインストールされます。 bower.jsonを以下のようになりました。

{
//中略
  "dependencies": {
    "angular": "1.2.0",
    "bootstrap": "‾3.0.2"
  },
  "exportsOverride":{
    "angular":{
      "js": "**/angular.min.js"
    },
    "bootstrap":{
      "js": "**/bootstrap.js",
      "css": "**/bootstrap.css"
    },
    "jquery":{
      "js": "**/jquery.js"
    }
  }
}

byType

layoutをbyTypeにするとbowerで設定されているtypeが親ディレクトリになり、その下に各ライブラリごとのディレクトリが作成されます。

typeは各ライブラリのbower.jsonのexportsOverrideによって設定されたものです。

f:id:ky0h:20131114015115p:plain

byComponent

byComponentは単純に親ディレクトリが各ライブラリのルートになり、その下に各タイプ別のディレクトリが生成され、その下にファイルが作成されます。

f:id:ky0h:20131114015014p:plain

独自のfunction

ただ、今回やりたい構成は以下の様なjsファイルとcssファイルをまとめてディレクトリの下に置きたいというもの。

f:id:ky0h:20131114015231p:plain

この場合はfunctionを使って独自にレイアウトを定義することができます。

Gruntfile.jsのlayoutの部分を以下の用にします。

layout : function (type, component) {
  if (type === 'css') {
    return 'css';
  } else {
     return 'js';
  }
},

functionの引数のtypeは上記のtypeを、componentは各ライブラリ名になっています。いずれもString型になっています。

戻り値はtargetDir以下のディレクトリ名になります。/(スラッシュ)を含んだ場合parseされ、ディレクトリ階層になります。

この状態で実行すると以下ようにjs/cssがまとまったフォルダ構成になります。

f:id:ky0h:20131114015231p:plain

※exportsOverrideでうまく設定しないと、 js以外のファイルもjsディレクトリに入ってきてしまうので、トライアンドエラーでその辺は調整していきます。

まとめ

一つのコマンドを実行するだけで、js/cssファイルのダウンロード→配置までやってくれるのですごく便利ですねー。 grunt-bower-taskには他にも便利なoptionが色々とあるので是非お試しあれ。

今回作ったgithubはこちら kyohei8/grunt-bower-task_Demo · GitHub