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

Question

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

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

Вот мой 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. 

Answer 1

Первая часть вашего вопроса достаточно проста. Live reload только перезагружает файлы, указанные вами в конфигурации; Если вы укажете sass-файлы, это те, которые перезагружены. Я исправил это в своей настройке, когда Grunt просмотрел файл css в моем каталоге dist, который, очевидно, изменяется каждый раз, когда Sass перекомпилируется.

watch: { 
    options: { 
    livereload: true, 
    }, 
    html: { 
    files: ['index.html'], 
    }, 
    js: { 
    files: ['js/**/*.js'], 
    tasks: ['jshint'], 
    }, 
    sass: { 
    options: { 
     livereload: false 
    }, 
    files: ['css/scss/**/*.scss'], 
    tasks: ['sass'], 
    }, 
    css: { 
    files: ['dist/css/master.css'], 
    tasks: [] 
    } 
} 

Я не уверен относительно второго вопроса. Он не показывает эти каталоги в моем grunt watch --verbose для любого проекта, затем снова я никогда не запускаю эту команду в подробностях.