Grunt(v0.4.0)でLivereload導入メモ

grunt-contrib-livereload.md

#Grunt(v0.4.0)でLivereload導入メモ

Grunt(v0.4.0)およびGruntプラグインを使ってLivereloadしてみるメモ。
一見メンドそうやけど、意外と簡単。

##準備

Grunt(v0.4.0)の環境がまだ無い人は、以下を参照。
Grunt(v0.4.0)導入メモ

メインで使うGruntプラグインは、以下。
grunt-contrib-livereload

上記ページの「Example config」のコードにある3つのgrunt.loadNpmTasks('...');のプラグインとGrunt本体をローカルにインストールする。

###インストール

まずはこんな感じの空のpackage.jsonを適当なディレクトリに用意。
まあ無くてもいいけど。

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

で、以下で一気に必要なものをインストール。

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

するとpackage.jsonはこうなる。

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

###タスクの設定

冒頭で書いたgrunt-contrib-livereloadのGitHubページの「Example config」にあるコードをとりあえずそのままコピーして、Gruntfile.jsというファイル名で上記のpackage.jsonと同じディレクトリに置く。

'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: '*.txt',
        tasks: ['livereload']
      }
    }

  });

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

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

ブラウザでlocalhost:9001を開いた画面をLivereload対象のサーバーとして、カレントディレクトリにあるテキストファイル*.txtを監視して、更新があれば自動でページをリロードします、っていう感じの設定。

##実践

###Step1

まずはpackage.jsonやGruntfile.jsを置いたディレクトリに適当な中身とファイル名でテキストファイル（test.txtとか）を作る。

###Step2

テキストファイルを作ったら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 *.txt

###Step3

上記で作ったテキストファイル名付きでlocalhost:9001/test.txtとかにブラウザでアクセスし、テキストファイルの中身が表示されることを確認。

これで導入完了のように見えるけど、該当のテキストファイルを更新してもブラウザはリロードしてくれない。

###Step4

Gruntからブラウザにリロードを命令するには、Safari/Chrome/FirefoxならLivereloadのエクステンションがあるので、それを使えば簡単。

各ブラウザのエクステンションはこちらから。
How do I install and use the browser extensions? – LiveReload Help & Support

###Step5

エクステンションがインストールできたら、さっきのURLlocalhost:9001/test.txtとかをブラウザで開いた状態で、インストールしたエクステンションのアイコンをクリック。

するとアイコンの見た目が変わる（Chromeならアイコン中央の白丸が黒丸に）はずなので、これで準備は完了。

###Step6

該当のテキストファイルを更新するとコマンドラインに以下のようなメッセージが出る。
合わせて、ブラウザが自動でリロードするのを確認。

Running "livereload" task
... Reload test.txt ...

Running "regarde" task