当更改另一个文件如css或JS时,如何使用Grunt live-reload重新加载html

Question

所以我爱上了咕噜咕噜的生活重装.我不明白的一件事是当css或js重新加载时如何让我的html重新加载.使用下面的代码,使用live-reload chrome扩展程序实时监视和更新HTML.但是当sass被编译成css时,我需要html来重新加载.

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

实时重新加载的目的是仅重新加载那些已更改的资产,因此如果编译了CSS,那么该资产需要重新加载,而不是HTML.实时重新加载扩展将根据更改的内容完成剩下的工作.因此,也要将livereload选项添加到CSS目标中.

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