How to use Grunt live-reload to reload html when another file such as css or JS is changed

Question

So I'm in love with grunt and live-reload. The one thing I don't understand is how to get my html to reload when the css or js reloaded. Using my code below, the HTML is watched and updated in real time using live-reload chrome extension. But when the sass is complied into css, I need the html to live-reload.

module.exports = function(grunt) {
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        compass: {
          dist: {
            options: {
              cssDir: 'styles',
              sassDir: 'sass',
              imagesDir: 'images',
              javascriptsDir: 'scripts',
              force: true
            }
          }
        },
        cssmin: {
          minify: {
            expand: true,
            cwd: 'styles',
            src: ['*.css', '!*.min.css'],
            dest: 'styles',
            ext: '.min.css'
          }
        },
        watch: {
            sass: {
                files: '**/*.scss',
                tasks: ['compass']
            },
            css: {
                files: '**/*.css',
                tasks: ['cssmin'],
            },
            html: {
                files: ['index.html','**/*.css'],
                options: {
                    livereload: true
                }
            }
        }
    });
    grunt.loadNpmTasks('grunt-contrib');
    grunt.registerTask('default',['watch','compass']);
}

Answer 1

The purpose of live reload is to only reload those assets that have changed, so if the CSS is compiled then that asset needs to reload, not the HTML. The live reload extension will do the rest depending on what changed. Therefore, add the livereload option to your CSS target as well.

    watch: {
        sass: {
            files: '**/*.scss',
            tasks: ['compass']
        },
        css: {
            files: '**/*.css',
            tasks: ['cssmin'],
            options: {
                livereload: true
            }
        },
        html: {
            files: ['index.html','**/*.css'],
            options: {
                livereload: true
            }
        }
    }