Grunt LiveReload is really slow

Question

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:

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?
How keep if from reloading the entire page, and just reload the CSS file that changed from my SASS compilation?

https://github.com/sindresorhus/time-grunt can show you which tasks are taking the most time and help you to optimize the tasks. — Jason Aller, Jan 20 '14 at 21:09

score 6 · Accepted Answer · edited May 23 '17 at 11:51

6

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/

edited May 23 '17 at 11:51

Community

1
1

answered Jan 20 '14 at 20:22

Ilan Frumer

32,059
8
70
84

score 1 · Answer 2 · answered Jan 20 '14 at 20:50

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

score 0 · Answer 3 · answered Jun 11 '15 at 08:36

0

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.

answered Jun 11 '15 at 08:36

bogdan.mustiata

1,725
17
26

Grunt LiveReload is really slow

3 Answers3

Linked