performancegruntjswatchgrunt-contrib-watchgrunt-contrib-compass

Grunt with Compass and Watch compiles slow


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,
            }
        }
    }

});

Solution

  • 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: {}
        }
    }