Grunt with Compass and Watch compiles slow

Question

Grunt takes a quite long to compile the css file, I am not sure if this is normal but regular compass watch takes around 5 seconds.

So the question is if there is any way to speed up the compilation time with Grunt or is it better to just stick with compass watch?

Running "compass:dist" (compass) task
♀unchanged images/sprite-sf580a96666.png
overwrite stylesheets/app.css (3.263s)
unchanged images/sprite-sf580a96666.png
overwrite stylesheets/app_fr.css (3.289s)
Compilation took 11.116s

Running "watch" task
Completed in 13.974s at Wed Dec 18 2013 13:53:05 GMT-0500 (Eastern Standard Time- Waiting...
OK
>> File "scss\_core.scss" changed.

Gruntfile.js:

compass: {
        dist: {
            options: {
            config: 'config.rb'
            }
        }
    },

    watch: {
        sass: {
            files: ['scss/*.scss'],
            tasks: ['compass:dist'],
            options: {
                spawn: false,
            }
        },
        scripts: {
            files: ['js/*.js'],
            tasks: ['concat', 'uglify'],
            options: {
                spawn: false,
            }
        }
    }

});

Answer 1

Along with what Simon mentioned about the watch option of grunt-contrib-compass, you can use grunt-concurrent to run two processes, effectively grunt watch and compass watch, alongside each other:

concurrent: {
    watch: {
        tasks: ['watch', 'compass:watch'],
        options: {
            logConcurrentOutput: true
        }
    }
},
compass: {
    watch: {
        options: {
            watch: true
        }
    }
}

If you want to run compass from Grunt when building, deploying, or anything else that requires compile instead of watch, you'll need to make a second compass task and use that:

compass: {
    // Compass grunt module requires a named target property with options.
    compile: {
        options: {}
    }
}

Answer 2

Well, you can watch using the Grunt-contrib-compass watch option. That'll spawn compass watch so you'll have better performance. Though this will not allow you to watch multiple type of files (for example if you also watch for .coffee file or always rebuild js, etc).

If you absolutely need grunt-contrib-watch, then make sure sass caching is activated using the grunt task. From your config pasted here, it looks like it is. But cache issue is usually the reason compass takes a long time to compile; so I'd double check in my Gruntfile.js if I were you.

Also, lots of spriting and image manipulation method can take quite a while to process.

Answer 3

Maybe a bit late to the party on this, but in case this helps anyone:

I've found the same poor performance with grunt-contrib-watch and sass. The best way to get around this seems to be to use a different watch plugin. I've found that grunt-watch-nospawn (as opposed to grunt-contrib-watch plugin) is much faster to compile sass. Quite significantly so - I'm seeing improvements of around two seconds.

If you want to tweak speed further, you can use grunt-sass instead of grunt-contrib-sass which uses libsass to provide another speed increase.

This combined with an autoprefixer, eg. nDmitry's (can't link, no rep) this should fill functionality gaps left from omitting Compass.

Hope that helps.