Question

这是我的gruntfile：

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

不确定还有什么可以尝试解决此问题。非常赞赏任何尖右方向的指针！

Answer 1

Livereload自述文件已经解决了这个问题。见live-reload-with-preprocessors：

每次启用livereload选项编辑监视文件时，   该文件将被发送到实时重新加载服务器。有些编辑过你的文件   可能希望已经发送到实时重装服务器，例如何时   预处理（sass，less，coffeescript等）。任何文件都没有   识别将重新加载整个页面而不是css或   的JavaScript。

解决方案是将livereload监视目标指向目标文件。

您应该只为css文件启用livereload。

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

Answer 2

非常类似的事情发生在我身上，虽然我还没有找到解决方案，但我认为问题可能出在部署设置中。我的源文件存储在本地，当检测到任何更改时（如手动保存或由预处理器覆盖），我们的IDE会自动将它们上传到部署服务器。

问题是，在部署上传完成之前触发了重新加载，因此重新加载的css文件不是实际的。但是下次重新加载时会使用此文件而不是实际更改但尚未上传的css文件。

我想如果有一个livereload延迟选项或类似的东西它可以解决问题。

如果这不是您的情况或者您已经解决了问题，我希望这可以为遇到相同问题的任何人节省一些调试时间。

编辑：这是一个如何通过编辑livereload.js为livereload添加延迟的建议 https://github.com/gruntjs/grunt-contrib-watch/issues/175#issuecomment-120000485

Grunt表：livereload重装后退一步......

2 个答案: