LiveReload

I’m not originally a web developer. But I’m doing more and more of it. I’ve discovered LiveReload some time ago and became addicted to it.

By that I mean that I’m putting it on pretty much every web page I’m working on. Getting instant feedback is great.

I’m using Grunt to launch it. So I’m now having two files that I’m copying around. They are pretty basic but could be useful so I thought I could share.

package.json

{
  "name": "livereload-gruntjs",
  "version": "0.1.0",
  "devDependencies": {
    "grunt": "~0.4.2",
    "load-grunt-tasks": "~0.3.0",
    "requirejs": "~2.1.11",
    "grunt-contrib-connect": "~0.6.0",
    "grunt-contrib-watch": "~0.5.3"
  }
}

Gruntfile.js

module.exports = function(grunt) {

  require('load-grunt-tasks')(grunt);

  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),

    connect: {
      options: {
        hostname: 'localhost',
        port: 9001,
        livereload: 35729
      },
      livereload: {
        options: {
          open: true,
          base: 'app'
        }
      }
    },

    watch: {
      livereload: {
        options: {
          livereload: '<%= connect.options.livereload %>'
        },
        files: [
          'app/{,*/}*.*'
        ]
      }
    }

  });

  grunt.registerTask('serve', [
    'connect:livereload',
    'watch'
  ]);

};