鴨のいいカモです

ここでアヒルの話題は出てきません。予めご了承下さい。

Bootstrap 3をWebページ制作環境にしよう(2) LiveReloadの実現

bootstrap

前回の事前準備ができましたら、今度はLiveReloadできるようにしましょう。

WebブラウザへLiveReload用拡張を追加

How do I install and use the browser extensions? – LiveReload Help & Supportを参考に、WebブラウザへLiveReload用拡張を追加しておきましょう。

grunt側でLiveReloadの設定

BootstrapのGruntfile.jsを見るとgrunt-contrib-watchを使っていますので、grunt-contrib-watchしてれば簡単にLiveReloadできるに書いたように、grunt-contrib-watchのオプションで簡単にLiveReloadできちゃいます。

今回は、とりあえずLiveReloadを動作させるということで、以下のようにします。

  1. トップディレクトリ配下にtest.htmlを作成
  2. cssやjsはdist配下のものを使用
  3. test.htmlが更新されたらLiveReloadされる

1,2に合わせたHTMLファイルは以下のような感じです。

<!doctype html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" href="dist/css/bootstrap.min.css">
</head>
<body>
  <h1>LiveReload</h1>
  <script src="http://code.jquery.com/jquery.js"></script>
  <script src="dist/js/bootstrap.min.js"></script>
</body>
</html>

Gruntfile.jsのwatchの部分を以下のようにしましょう。

    watch: {
      /* 略 */
      recess: {
        files: 'less/*.less',
        tasks: ['recess']
        }
      },
      /* 以下htmlを追加 */
      html: {
        files: 'test.html',
        tasks: [],
        options: {
          livereload: true
        }
      }
    }

そして、grunt.registerTask()を実行しているあたりで、ローカルにサーバ起動しつつwatchを実行するgruntタスクを追加しましょう。ローカルでサーバを起動するconenctはすでにありますので、それを使って。今回はwatchreloadというタスク名にします。

  grunt.registerTask('watchreload', ['connect', 'watch']);

LiveReload実施

トップディレクトリで以下のコマンドを実行し、作成したwatchreloadタスクを起動しましょう。

$ grunt watchreload

Webブラウザで http://localhost:3000/test.html を開くと、先ほど作成したHTMLファイルを開くことができるはずです。

そして、WebブラウザにインストールしたLiveReload拡張を有効にして(デフォルトのポートは35729です)、test.htmlを書き換えると、自動でWebブラウザが再読込され、変更した内容が表示されるはずです。LiveReloadが実現できました！

次回は、この環境をベースに、効率的にBootstrapを用いたサイトを作成できるようにしましょう。