Have watch compile only changed sass

I recently started using browsersync. With an app that takes on average 10 seconds to browserify all of the javascript trivial css changes can take a lot of time because of refreshing. This piece of code further saves time by telling grunt-sass to compile only the changed scss file using grunt eventing.

It takes the path that changed and replaces the grunt-sass src param with it saving upwards of three seconds for me. The only caveat is if you are editing sass includes. Grunt-sass has no idea which index file needs to be compiled. In the end I wasn’t able to use this time saver but someone else might be able to.

grunt-watch config

module.exports = (grunt, options) ->
grunt.event.on('watch', (action, filepath) ->
grunt.config('sass.dist.files.2', '[<%='+ filepath+ ' %>]')
return scripts:
files: "stylesheets/**/*.scss"
tasks: ['css']
debounceDelay: 250
event: ['changed']
spawn: false

grunt-sass config

imagePath : path.join("/", Asset.STATIC_PATH, "images")
includePaths : [ "lib/assets/stylesheets/" ]
outputStyle : (if options.environment is "development" then "nested" else "compressed")

files: [
expand : true
cwd : "lib/assets/stylesheets/"
src : [ "**/*.scss" ]
dest : "public/static/"
ext : ".css"

Leave a Reply

Your email address will not be published. Required fields are marked *