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.

Answer 4

I know this question is a few years old at this point but I thought I'd add another potential cause/solution.

First, try starting your grunt server using --verbose and watch to see where your sass task is taking most of its time. There are plugins that will report the time each part of the tast takes but for me simply watching the --verbose output made it very clear where the delay was. For me, it wasn't the actual sass task, it was the loading unnecessary dependencies.

As is outlined in this issue on Grunt's GitHub repo, one reason that certain tasks may take a long time to complete is that Grunt loads all tasks everytime it runs. So even though grunt-contrib-watch is only running the compass:dist task when you change your sass files grunt is still loading all tasks and their dependencies.

There is now a plugin called jit-grunt (or on npm) that addresses this and only loads what is necessary to run your task. This helped my compass task complete much faster.