Grunt with Compass and Watch compiles slow

xphong picture xphong · Dec 18, 2013 · Viewed 12.7k times · Source

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

Henry Blyth picture Henry Blyth · Feb 11, 2014

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