当其他文件（如 css 或 JS）发生更改时如何使用 Grunt live-reload 重新加载 html

Question

所以我爱上了 grunt 和 live-reload。我不明白的一件事是如何在 css 或 js 重新加载时让我的 html 重新加载。使用下面的代码，可以使用 live-reload chrome 扩展实时查看和更新​​ HTML。但是当sass被编译成css时，我需要html来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

实时重新加载的目的是仅重新加载那些已更改的资源，因此如果编译了 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
            }
        }
    }