livereload 

Seeing as how Craft’s happylager.dev demo site comes with a gruntfile, I took a couple minutes to add LiveReload to it. As LiveReload is now part of grunt-contrib-watch, it was as easy as adding this into the existing gruntfile.js:

  options: {
      livereload: true,
  },

into the block that looks like: 

  grunt.initConfig({
      watch: {
         // ...
    }
  }

And then adding <script src="http://localhost:35729/livereload.js"></script> to the {%block head %} of /templates/_layouts/base.html:

--

It was finicky at first, but after running grunt in the command line and reloading the Chrome browser (which has the LiveReload extension) a bunch of times it caught up and worked.

--

UPDATE

Thanks very much to @josh_stewart for showing me a similar — but maybe better — way to do this with Gulp and BrowserSync

The two advantages of BrowserSync: the instructions are super-clear and the LiveReload extension support is full of comments about its lack of updates.

The major part of the gulpfile.js follows:

gulp.task('serve', ['styles'], function() {
  browserSync.init({
    proxy: 'http://SITENAME.dev',
    notify: false,
    logLevel: 'info',
    logConnections: true,
    logFileChanges: true,
    online: true,
  });

  gulp.watch('source/sass/*.scss', ['styles']);
  gulp.watch('craft/templates/**/*.html').on('change', browserSync.reload);
});

and that the last part of the return statement in gulp.task('styles', function () { /* ... */ } is .pipe(browserSync.stream());