如何使用Grunt live-reload在其他文件（如css或JS）發生更改時重新加載html

Question

因此，我愛上了grunt和live-reload。我不明白的一件事是如何讓我的HTML重新加載時，CSS或JS重新加載。使用下面的代碼，使用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 
      } 
     } 
    }