Как я могу заставить Grunt/Watch/LiveReload перезагрузить Sass/CSS без обновления полной страницы?

До сих пор я работал над тем, как я хочу (который отслеживает все файлы, которые я хочу, и обновляюсь, когда есть изменения), кроме того, что мне хотелось бы сделать изменения в Sass/CSS и обновите его в браузере без загрузки страницы. Это не огромная сделка, но иногда я пытаюсь изменить стиль чего-то после того, как было какое-то взаимодействие с страницами, и мне нужно пройти процесс снова, если страница обновится.

Я уверен, что это возможно, но пока это меня не ускользает.

Здесь my Gruntfile.js:

module.exports = function(grunt) {

  // Project configuration.
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    connect: {
      server: {
        options: {},
      }
    },
    sass: {
      dist: {
        options: {
          style: 'compressed'
        },
        files: {
          'css/main.css': 'css/scss/main.scss',
        }
      }
    },
    jshint: {
      files: ['js/*.js'],
    },
    watch: {
      options: {
        livereload: true,
      },
      html: {
        files: ['index.html'],
      },
      js: {
        files: ['js/**/*.js'],
        tasks: ['jshint'],
      },
      css: {
        files: ['css/scss/**/*.scss'],
        tasks: ['sass'],
      },
    }
  });

  // Actually running things.
  grunt.loadNpmTasks('grunt-contrib-sass');
  grunt.loadNpmTasks('grunt-contrib-watch');
  grunt.loadNpmTasks('grunt-contrib-connect');
  grunt.loadNpmTasks('grunt-contrib-jshint');

  // Default task(s).
  grunt.registerTask('default', ['connect', 'watch']);

};

Одна странная вещь, которую я хотел упомянуть о моей установке: когда я запускаю grunt watch --verbose, я вижу, что она отслеживает .git, а также .sass-cache. Правильно ли это? Я не знаю, что я сделал, чтобы сделать это.

Watching .git for changes.
Watching .sass-cache for changes.

Ответ 1