grunt-contrib-watch：CSS重新加载

我遇到麻烦（事实上，我一直困扰着）正在配置grunt来重新加载浏览器中的 CSS （没有浏览器刷新整个页面），当开发人员更改源文件 ..这些是手写笔，但我相信它在这里无关，它可能是 sass / compass / less 或者其他什么，问题也是一样的。

以下是我现在的解决方案：

grunt.initConfig({
  cfg: {
    service: {
      livereload: {
        port: 3955
      }
    },
    paths: {
      root: __dirname,
      serve: '<%= cfg.paths.root %>/.tmp/serve',
    },
  },
  stylus: {
    options: {
      paths: ['.tmp'],
      import: ['nib']
    },
    compile: {
      files: {
        '<%= cfg.paths.serve %>/app.css': 'app/styles/index.styl' // stylus main file
      }
    }
  },
  watch: {
    stylus: {
      files: ['app/**/*.styl'],
      tasks: ['stylus'],
      options: {
        spawn: false,
        livereload: false,
//      interrupt: true,
//      livereload: '<%= cfg.service.livereload.port %>'
      }
    },
    appStyles: {
      options: {
        livereload: '<%= cfg.service.livereload.port %>'
      },
      files: [
        '<%= cfg.paths.serve %>/app.css'
      ]
    }
  }
});

项目真的很大，但我试图删除不相关的部分。无论如何，其中有app/styles个目录，其中包含.styl个手写笔文件。当手写笔文件发生任何变化时，会触发watch:stylus将手写笔预处理为CSS：.tmp/serve/app.css文件已创建。

然后，还有另一个观察者watch:appStyles，它会监听.tmp/serve/app.css上的更改，当注意到它们时，浏览器只会重新加载CSS。

问题在于，它或多或少地有效，十分之一。这似乎是一场竞争 - 但我找不到种族的位置。

监视任务以：

开头

Running "watch" task
Waiting...

当我更改app/styles/*.styl个文件时，有时会得到：

>> File "app\styles\_colors.styl" changed.

Running "stylus:compile" (stylus) task
File C:\development\mp-frontend\.tmp\serve\app.css created.

Running "watch" task
Completed in 0.858s at Wed Apr 15 2015 18:39:40 GMT+0200 (Rom, sommertid) - Waiting...
>> File ".tmp\serve\app.css" changed.

Running "watch" task
Completed in 0.018s at Wed Apr 15 2015 18:39:40 GMT+0200 (Rom, sommertid) - Waiting...

是什么意味着观察者watch:stylus已经解雇了创建文件stylus:compile的{{1}}。 .tmp\serve\app.css已通知.tmp\serve\app.css文件更改，并且浏览器已重新加载其CSS，一切正常。但这很少见。

大多数时候，我得到：

watch:appStyles

是什么意味着观察者>> File "app\styles\_colors.styl" changed. Running "stylus:compile" (stylus) task File C:\development\mp-frontend\.tmp\serve\app.css created. Running "watch" task Completed in 1.017s at Wed Apr 15 2015 18:38:51 GMT+0200 (Rom, sommertid) - Waiting...已经解雇了创建文件watch:stylus的{{1}}。它停在这里！ stylus:compile更改不注意到，第二个观察者未被解雇。

当我不修改手写笔（源文件）并且只是手动编辑生成的.tmp\serve\app.css只是为了看看会发生什么 - 浏览器CSS重新加载工作正常。

因此，我认为存在某种竞争条件，我不知道在哪里。

我一直在尝试操作watch / livereload grunt选项（参见注释行），但没有一个组合对我有效。

我一直在尝试关注https://github.com/gruntjs/grunt-contrib-watch#live-reload-with-preprocessors，但无法在我的解决方案中看到错误......

CSS预处理时grunt watch / livereload失败

grunt-contrib-watch：CSS重新加载

0 个答案: