GruntのLiveReloadを試してみたら想像以上に便利だった。

automation

Gruntを使ってLiveReloadを試してみた。

LiveReloadを使うとHTMLなどのファイルを編集して保存した時に自動でブラウザをリロードしてくれる。

サーバ側はGruntのモジュール、ブラウザ側はChromeExtensionでOK。

Gruntモジュールはgrunt-contrib-connectとgrunt-contrib-watchが必要。

% npm install grunt-contrib-connect --save-dev
% npm install grunt-contrib-watch --save-dev

でインストールする。

ChromeExtensionはLiveReload(ChromeWebStore)をインストールしておく。

次にGruntのタスクをGruntfile.jsに記述する

% vi Gruntfile.js
module.exports = function (grunt) {
  'use strict';
  var pkg = grunt.file.readJSON('package.json');
  grunt.initConfig({
    pkg: grunt.file.readJSON("package.json"),
    bower: {
      install: {
        options: {
          targetDir: './lib',
          layout: 'byType',
          install: true,
          verbose: false,
          cleanTargetDir: true,
          cleanBowerDir: false
        }
      }
    },
    connect: {
      livereload: {
        options: {
          port: 9000
        }
      }
    },
    watch: {
      html: {
        files: 'views/*.html',
        tasks: [],
        options: {
          livereload: true,
          nospawn: true
        }
      }
    }
  });
  var taskName;
  for(taskName in pkg.devDependencies) {
    if(taskName.substring(0, 6) == 'grunt-') {
      grunt.loadNpmTasks(taskName);
    }
  }
  grunt.registerTask('live', ['connect', 'watch']);
  grunt.registerTask('default', ['bower:install', 'live']);
};

connectがサーバを起動するタスクで、watchがファイルを監視するタスク。

ここまで書いたら

% grunt live

でサーバが起動してファイル監視が有効になる。

あとはChromeExtensionを有効にしてファイルを編集・保存するとブラウザが自動でリロードされる。

試してみてはじめてわかったけれどLiveReloadは想像以上に便利！

2画面環境と組み合わせればもう怖いものなしじゃないかと思うくらい。

感覚的にはRuby+RSpecでプログラミングしているのと似ていて、リズムよくコーディングできてすごく快適。

この仕組みは積極的に使っていこうと思う。

リンク