带着livereload的咕噜声,慢下来

时间:2013-12-06 13:41:02

标签: performance gruntjs livereload

这是我的Gruntfile.js

watch: {
            options: { livereload: true },
            compass: {
                files: ['assets/sass/*.{scss,sass}'],
                tasks: ['compass']
            },
            // js: {
            //  files: '<%= jshint.all %>',
            //  tasks: ['jshint', 'uglify']
            // },
            livereload: {
                // files: ['*.html', '*.php', 'assets/stylesheets/**/*.{css}']
                files: ['*.html', '*.php', 'assets/stylesheets/custom.css']
            }
        },

        // compass and scss
        compass: {
            dist: {
                options: {
                config: 'config.rb',
                force: true
                }
            }
        },

,这是grunt watch的输出:

Done, without errors.
... Reload assets/sass/custom.scss ...
... Reload assets/stylesheets/custom.css ...
Completed in 11.033s at Fri Dec 06 2013 14:20:48 GMT+0100 (CET) - Waiting...
OK
>> File "assets/stylesheets/custom.css" changed.
>> File "assets/sass/custom.scss" changed.

Running "compass:dist" (compass) task
overwrite assets/stylesheets/custom.css (0.701s)
identical assets/stylesheets/app.css (3.452s)
Compilation took 4.158s

Done, without errors.
... Reload assets/sass/custom.scss ...
... Reload assets/stylesheets/custom.css ...
Completed in 10.719s at Fri Dec 06 2013 14:21:53 GMT+0100 (CET) - Waiting...

  1. ..那么,为什么livereload需要花费大量时间来刷新页面, 10秒预览我的.scss文件中的任何更改,也是如何 可能不会完全刷新页面,只能注入.css更改 在页面?
  2. ..我想知道的另一件事是如何避免这种情况 app.css上的编译滞后,耗时近4秒,但事实并非如此 甚至改变了?
  3. 我正在使用带有此配置的livereload浏览器扩展程序。

    感谢。

2 个答案:

答案 0 :(得分:2)

1a:为了加快监视任务的速度,请尝试选项spawn:false。这可能会使事情变得不稳定,但值得一试。如果它似乎没问题。如果您在监视任务中添加了许多不同的任务,它可能会在以后引起您的问题。但是你可以担心,然后潜在地禁用它。

1B:

首先,不要为罗盘任务启用livereload。 (你有全局,只接受css)因此,它也会触发scss文件的livereload事件。但由于livereload客户端不知道该文件,因此它将重新加载整个页面。确保唯一报告的文件是已编译的css。

其次,监视任务也会触发以前更改过的文件的livereload。这是众所周知的,但我相信它已在master中修复,但尚未发布。

https://github.com/gruntjs/grunt-contrib-watch/issues/205

2:

好吧,它必须编译它来比较它,然后它只是报告它是相同的。

答案 1 :(得分:0)

仅注入.css更改:

    watch: {
        compass: {
            files: ['assets/sass/*.{scss,sass}'],
            tasks: ['compass']
        },
        livereload: {
            files: ['assets/stylesheets/*.css'],
            options: { livereload: true }
        }
    }

不幸的是,我的编译时间也很慢(必须是指南针)。