Grunt LiveReload is really slow

问题:

This is probably an affect of my inefficient setup and not a problem with grunt/livereload.

Here's my watch test in my 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
        }
    }
},

This will recompile my SASS and the reload the page, but it takes 5-6 seconds to complete the CSS compilation, then it does a full page refresh, instead of just reloading the CSS file that changed.

So my questions are this:

1. How do I keep it from taking so long to compile the SASS and refresh the page, or am I just being to picky, and this is an inherit part of grunt?

2. How keep if from reloading the entire page, and just reload the CSS file that changed from my SASS compilation?

回答1:

Check my other answer: Fastest way to compile SCSS (Compass) + refresh the browser?

grunt-contrib-sass uses Ruby sass which is very slow, it has nothing to do with grunt itself.

Use grunt-sass instead, it uses libsass which is lighting fast c implementation of sass.

Read this article: http://benfrain.com/lightning-fast-sass-compiling-with-libsass-node-sass-and-grunt-sass/

回答2:

The best solution is to move from grunt-contrib-sass to grunt-sass, but if you don't have much time to fix this, i think, you should move your 'autoprefixer' task from watch section to deploy section.

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

In my project this trick help me, because 'autoprefixer' task works very slowly

回答3:

Or you could use a live reloader tool, like fast-live-reload, in combination with the ruby sass compiler.

Note that they offer their own watcher that is very fast (e.g. for compass run: compass watch).

Disclaimer: I am the creator of fast-live-reload.