yeoman, grunt, bowerで静的サイト構築（第四回）

grunt bower yeoman

yeoman, grunt, bowerで静的サイト構築（第三回）の続き

今回の内容は下記です。

bower

以前にも簡単に触れてはいますが、yeomanのインストール時にbowerもインストールされ、yo mobileの実行でbower installが実行されていました。

裏で実行されているだけでは何もわからないので、bowerのインストールから処理を追っていきます。

install

$ npm i -g bower

.bowerrc

generator-mobileで構築したプロジェクトの直下に「.bowerrc」というファイルが作成されています。

「.bowerrc」はbowerの動作を定義するconfigファイルで、ライブラリのインストールディレクトリの指定をしています。

{
    "directory": "app/bower_components"
}

bower.json

generator-mobileで構築したプロジェクトの直下に「bower.json」というファイルが作成されています。

「bower.json」はbowerで管理するライブラリの定義ファイルです。

デフォルトでmodernizrとjqueryが管理対象として定義されています。

{
  "name": "mobile",
  "version": "0.0.0",
  "dependencies": {
    "modernizr": "~2.6.2",
    "jquery": "~1.9.1"
  },
  "devDependencies": {}
}

bowerのコマンド

  • bower search

bowerでインストール可能なライブラリの一覧を表示します

  • bower search XXX

XXXに部分一致するライブラリ一覧を表示します

  • bower install

bower.jsonに設定されている全ライブラリをインストールします

  • bower install XXX -S

XXXのライブラリをインストールします

「-S」を指定すると、bower.jsonにもライブラリが登録されます

インストール先のディレクトリは.bowerrcで指定したディレクトリになります

  • bower uninstall XXX

XXXのライブラリをアンインストール（ファイル削除）します

詳しくはhttps://github.com/bower/bowerでご確認ください。

grunt-bower-install

bowerでインストールしたライブラリを、指定したテンプレートファイルにコマンドで反映させるgruntのタスクです。

ヘッダの定義ファイル等、JSの読み込み設定を行うファイルに下記の用なタグを設置しておきます。

$ vi app/bower-install-test.html

<!-- bower:js -->
<!-- endbower -->

$ vi Gruntfile.js

※Gruntfile.jsの設定に関しては、https://github.com/stephenplusplus/grunt-bower-installをご確認ください。

        'bower-install': {
            target: {
                html: 'app/bower-install-test.html',
            }
        }

設定したタスクを実行します

$ grunt bower-install

対象ファイルの内容を確認します。

$ cat app/bower-install-test.html

<!-- bower:js -->
<script src="app/bower_components/jquery/jquery.js"></script>
<script src="app/bower_components/modernizr/modernizr.js"></script>
<!-- endbower -->

bower.json, .bowerrcで定義してあるライブラリがHTMLで出力されましたね。

一度設定してしまえば、ライブラリの追加は下記を実行するだけで完了します。

$ bower install XXX -S

$ grunt bower-install

今回はbowerについて、記載してみました。

難しいことは何もしていないので、導入しやすいのではないでしょうか？