如何在不刷新整个页面的情况下让 Grunt/Watch/LiveReload 重新加载 Sass/CSS？

Posted 2023-02-22

【中文标题】如何在不刷新整个页面的情况下让 Grunt/Watch/LiveReload 重新加载 Sass/CSS？

【英文标题】：How can I get Grunt/Watch/LiveReload to reload Sass/CSS without a full page refresh?

【发布时间】：2013-10-01 02:23:48

【问题描述】：

到目前为止，我已经按照自己的意愿完成了所有工作（监控所有我想要的文件并在有变化时刷新），除了我希望能够对 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.

【参考方案1】：

您问题的第一部分很简单。实时重载只重载你在配置中指定的文件；即，如果您指定 sass 文件，则会重新加载那些文件。我通过让 Grunt 监视我的 dist 目录中的 css 文件在我的设置中解决了这个问题，显然每次重新编译 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 中为任何项目显示这些目录，然后我再也不会详细地运行该命令。

【讨论】：

快速旁注，这对我来说不适用于 spawn: false，但对 spawn: true 来说效果很好 - 谢谢 Ben

我使用 '.tmp/apps/**/*.css,js' 并切换到 '.tmp/apps/**/*.css', '.tmp/apps/**/*.js' 来让 css 热重载。