grunt-reloadを試す
grunt-reload導入
guard-livereloadはすでに導入済みとします。
私は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に指定したファイルを編集すると、自動的にブラウザをリロードしてくれます。やったー