grunt-reloadを試す

grunt-reload導入

npm install grunt-reload

guard-livereloadはすでに導入済みとします。

guard/guard-livereload · GitHub

私はChrome拡張をインストールしてます。

真ん中のリロードっぽいアイコンがそうです。

接続に成功すると真ん中の丸が、黒丸になります。

grunt-reloadインストール

$ npm install grunt-reload

プロジェクト直下のnode_modulesディレクトリにインストールされます。

grunt.jsファイルに

grunt.loadNpmTasks('grunt-reload');

を追加

module.exports = function(grunt) {
  grunt.initConfig({
    reload: {
      port: 35729,
      liveReload: {}
    },
    trigger: {
      watchFile: 'index.html'
    },
    server: {
      port: 8000,
      base: '.'
    },
    watch: {
      files: ['index.html', 'css/app.css', 'js/app.js'],
      tasks: 'reload'
    }
  });

  grunt.loadNpmTasks('grunt-reload');

  grunt.registerTask('run', 'server reload watch');
};

実行すると

$ grunt run
Running "server" task
Starting static web server on port 8000.

Running "reload" task
reload server running at http://localhost:35729

Running "watch" task
Waiting...

のように待ち状態になるので、ブラウザのlivereloadをクリックして認識させます。

Waiting...Sat Feb 09 2013 13:34:55 GMT+0900 (JST) Connection accepted.
Received Message: {"command":"hello","protocols":["http://livereload.com/protocols/connection-check-1"]}
Sat Feb 09 2013 13:34:59 GMT+0900 (JST) Connection accepted.

Connection acceptedと出るので認識されたのがわかると思います。

grunt.jsでwatchに指定したファイルを編集すると、自動的にブラウザをリロードしてくれます。やったー