Question

这可能是我的低效设置的影响，而不是grunt / livereload的问题。

这是我的grunfile.js中的手表测试：

watch: {
    images: {
        files: ['images/**/*.{png,jpg,gif}', 'images/*.{png,jpg,gif}'],
        tasks: ['imagemin'],
        options: {
            spawn: false
        }
    },
    js: {
        files: ['js/*.js','js/**/*.js'],
        tasks: ['jshint'],
        options: {
            spawn: false
        }
    },
    svgs: {
        files: ['images/*.svg','images/**/*.svg'],
        task: ['svgmin'],
        options: {
            span: false
        }
    },
    scss: {
        files: ['sass/*.scss', 'sass/**/*.scss'],
        tasks: ['sass','autoprefixer'],
        sourceComments: 'normal',
        options: {
            nospawn: true,
            livereload: true
        }
    }
},

这将重新编译我的SASS并重新加载页面，但是完成CSS编译需要5-6秒，然后它会进行整页刷新，而不是仅重新加载已更改的CSS文件。

所以我的问题是：

如何避免花费这么长时间来编译SASS并刷新页面，或者我只是挑剔，这是grunt的继承部分？
如何重新加载整个页面，并重新加载从我的SASS编译中更改的CSS文件？

Answer 1

检查我的其他答案：Fastest way to compile SCSS (Compass) + refresh the browser?

grunt-contrib-sass使用Ruby sass非常慢，它与grunt本身无关。

使用grunt-sass代替，它使用libsass，它是sass的快速c实现。

阅读这篇文章： http://benfrain.com/lightning-fast-sass-compiling-with-libsass-node-sass-and-grunt-sass/

Answer 2

最好的解决方案是从grunt-contrib-sass转移到grunt-sass，但是如果你没有太多时间来解决这个问题，我想，你应该将你的'autoprefixer'任务从watch部分移到deploy部分

scss: {
    files: ['sass/*.scss', 'sass/**/*.scss'],
    tasks: ['sass',
    sourceComments: 'normal',
    options: {
        nospawn: true,
        livereload: true
    }
}

在我的项目中，这个技巧对我有帮助，因为'autoprefixer'任务工作非常缓慢

Answer 3

或者您可以使用实时重新加载器工具，如fast-live-reload，与ruby sass编译器结合使用。

请注意，他们提供自己的观察者，非常快（例如罗盘运行：compass watch）。

免责声明：我是快速重新加载的创建者。

Grunt LiveReload真的很慢

3 个答案: