咕噜咕噜的手表:实时加载重新加载落后 1 步....

Question

这是我的咕噜咕噜文件：

module.exports = function(grunt) {
    // Project configuration.
    grunt.initConfig({
        hologram: {
            generate: {
                options: {
                    config: 'config.yml'
                }
            }
        },
        libsass: {
            files: {
                src: 'src/scss/style.scss',
                dest: 'templates/static/css/style.css'
            }
        },
        connect: {
            server: {
                options: {
                    port: 8000,
                    hostname: 'localhost',
                    base: 'docs/',
                    livereload: 35729
                }
            }
        },
        watch: {
            scss: {
                files: ['src/scss/**/*.scss', 'templates/static/css/*.css'],
                tasks: ['libsass','hologram'],
                options: {
                  livereload: true
                }
            }
        }
    });
    // Load plugins.
    grunt.loadNpmTasks('grunt-libsass');
    grunt.loadNpmTasks('grunt-hologram');
    grunt.loadNpmTasks('grunt-contrib-connect');
    grunt.loadNpmTasks('grunt-contrib-watch');
    // Default task(s).
    grunt.registerTask('default', ['connect','libsass','hologram','watch']);
};

这是我的包文件：

{
  "name": "...",
  "version": "1.0.0",
  "description": "...",
  "dependencies": {
    "grunt": "^0.4.5"
  },
  "devDependencies": {
    "connect-livereload": "^0.5.2",
    "grunt": "^0.4.5",
    "grunt-contrib-connect": "^0.9.0",
    "grunt-contrib-watch": "^0.6.1",
    "grunt-hologram": "0.0.4",
    "grunt-libsass": "^0.2.0"
  },
  "repository": {
    "type": "git",
    "url": "..."
  },
  "author": "Yann Bettremieux",
  "homepage": "..."
}

一切似乎都正常。当我转到http://localhost:8000/时，我会看到我的网站，当我保存监视的文件时，页面会重新加载等。 但它实际上并没有重新加载以前的更改。意思是，当我第一次编辑 SCSS 文件说color: blue时，我在检查器中看到加载了一些 CSS livereload 文件，但页面上没有变化。如果我更改 CSS 以color: red页面重新加载，但以蓝色显示所有内容......如果我将其更改为绿色，它会重新加载并以红色显示所有内容，等等。

我尝试使用 chrome livereload 扩展程序，但它没有改变任何东西。我尝试了咕噜咕噜而不是libsass。相同的行为。

不确定还有什么可以尝试解决此问题。任何正确方向的指针都非常感谢！

Answer 1

Livereload Readme 已经解决了这个问题。请参阅使用预处理器实时重新加载：

每当在启用实时加载选项的情况下编辑监视的文件时， 该文件将被发送到实时重新加载服务器。一些编辑过的文件 可能希望已发送到实时重新加载服务器，例如当 预处理（sass、less、coffeescript 等）。作为任何文件不是 识别将重新加载整个页面，而不仅仅是 CSS 或 JavaScript。

解决方案是将实时重新加载监视目标指向目标文件。

您应该只为 css 文件启用实时重新加载。

watch: {
    scss: {
        files: ['src/scss/**/*.scss'],
        tasks: ['libsass','hologram']
    },
    css: {
        files: ['templates/static/css/*.css'],
        options: {
          livereload: true
        }
    }
}