GruntでLivereload(自動更新)をやってみた!

黄砂に花粉にPM2.1に眼精疲労、トドメに左の手首のTFCC損傷(三角線維軟骨複合体損傷)・・・
なんだか微妙な調子の大熊猫です。

今回は前の投稿で少しふれたGruntによる自動更新のやり方です。
尚、Grunt(v0.4)の環境が整っている事を前提に話を進めます。
Gruntの導入についてはこちらをご覧下さい。

Livereload(自動更新)を実現するにあたり主に利用するGruntのプラグインは「grunt-contrib-livereload」です。
今回はこちらのプラグインのGitHubにあるExampleのコード参考に解説を進めます。

準備

必要になるプラグインのインストールと必要なファイルを準備します。
今回は解説のために以下のような構造のディレクトリを用意しました。

├──Gruntfile.js
│
├──package.json
│
└──index.html

package.jsonとプラグイン

package.jsonは以下のような最低限の内容のものを用意しておきます。

{
  "name": "grunt-livereload",
  "version": "0.0.1",
  "author": "name",
  "devDependencies": {}
}


※npm initでpackage.jsonを作る事も可能ですが、今回は事前に作っておきます。

プラグインはExampleに「grunt-contrib-livereload」以外で利用するもの
(grunt-regarde,grunt-contrib-connect)が書かれています。
gruntとこれらを含めて必要なプラグインを作業環境にインストールします。

npm install grunt grunt-regarde grunt-contrib-connect grunt-contrib-livereload --save-dev

結果package.jsonがこうなります。

{
  "name": "grunt-livereload",
  "version": "0.0.1",
  "author": "name",
  "devDependencies": {
    "grunt-regarde": "~0.1.1",
    "grunt-contrib-connect": "~0.1.2",
    "grunt": "~0.4.0",
    "grunt-contrib-livereload": "~0.1.1"
  }
}

タスクを設定する

「Gruntfile.js」にタスクを記述していきます。
今回は、はじめにお伝えしたとおりExampleを参考に進めますので「Gruntfile.js」にはほとんど
そのままのコードを貼り付けます。
変えたのは自動更新の対象とするファイルを「**/*.txt」から「**/*.html」への変更のみです。

「Gruntfile.js」はこのようになります。

'use strict';
var path = require('path');
var lrSnippet = require('grunt-contrib-livereload/lib/utils').livereloadSnippet;

var folderMount = function folderMount(connect, point) {
  return connect.static(path.resolve(point));
};

module.exports = function (grunt) {
  // Project configuration.
  grunt.initConfig({
    connect: {
      livereload: {
        options: {
          port: 9001,
          middleware: function(connect, options) {
            return [lrSnippet, folderMount(connect, '.')]
          }
        }
      }
    },
    // Configuration to be run (and then tested)
    regarde: {
      fred: {
        files: '**/*.html',
        tasks: ['livereload']
      }
    }

  });

  grunt.loadNpmTasks('grunt-regarde');
  grunt.loadNpmTasks('grunt-contrib-connect');
  grunt.loadNpmTasks('grunt-contrib-livereload');

  grunt.registerTask('default', ['livereload-start', 'connect', 'regarde']);
};

Livereloadのエクステンションを用意する(ブラウザ側)

Gruntからブラウザにリロードは、Safari/Chrome/FirefoxならLivereloadのエクステンションが用意されています。
他にも方法はあるようですが、簡単に実現できますので、今回はこちらを利用します。

各ブラウザのエクステンションはこちらをご参照下さい。

やってみる

ターミナルなどで作業ディレクトリに移動します。
移動したら「grunt」と叩きます。
問題が無ければ以下のようなメッセージがでるはずです。

$ grunt
Running "livereload-start" task
... Starting Livereload server on 35729 ...

Running "connect:livereload" (connect) task
Starting connect web server on localhost:9001.

Running "regarde" task
Watching **/*.html

ブラウザで確認する

Gruntfile.jsのファイルを見ていただければお分かりの通り、「localhost:9001」でサーバーを立てています。

「localhost:9001/」にアクセスしてみましょう。
[index.html]の中味が表示されるはずです。
ただこれはサーバーが立っているだけなので、「index.html」を更新しても自動で反映をしてくれません。

ブラウザと連動する

先ほどのエクステンションがインストールされたらブラウザにアイコンが表示されていると思います。
「localhost:9001」にアクセスしたらアイコンをクリックして下さい。
そうすると、アイコンが変化し同期を取っている事(Chromeならアイコン中央の白丸が黒丸に)がわかるようになります。

Livereloadのエクステンション

自動更新を確認します。

ブラウザがサーバーと同期をしたら、「index.html」を更新してみましょう。
ブラウザが自動でリロードされ、ターミナルに以下のようなメッセージが出てきます。

Running "livereload" task
... Reload index.html ...

Running "regarde" task