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
            }
        }
    }

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

1 个答案: