javascript - 咕噜 watch : livereload reloads 1 step behind…

Question

这是我的 grunt 文件:

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 扩展 insrtea 但它没有改变任何东西。我尝试了 grunt-sass 而不是 libsass。同样的行为。

不知道还可以尝试什么来解决此问题。非常感谢任何正确方向的指针!

Answer 1

Livereload 自述文件已解决该问题。请参阅live-reload-with-preprocessors :

Any time a watched file is edited with the livereload option enabled, the file will be sent to the live reload server. Some edited files you may desire to have sent to the live reload server, such as when preprocessing (sass, less, coffeescript, etc). As any file not recognized will reload the entire page as opposed to just the css or javascript.

The solution is to point a livereload watch target to your destination files.

您应该仅对 css 文件启用 livereload。

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