Getting a faster sass-watch using grunt-sass

My sass --watch was getting increasingly slow especially with compiling bootstrap on every change. It was also using a substantial amount of battery life as a result.

After looking around it seems Sindre Sorhus has already solved the problem. The repository provides a native sass compiler which you can easily install using:

npm install --save-dev grunt-sass

I want to run grunt sasswatch to invoke the watcher separately to the other tasks to I created a new one. When it is called it will run the sass compile once and then invoke the watcher.

grunt.registerTask('sasswatch', [
  'sass',
  'watch:scss'
]);

The sass configuration calls my main scss which includes the many and heavy bootstrap files.

sass: {
    options: {
        sourceMap: true
    },
    dist: {
        files: {
            'app/css/main.css': 'app/main.scss'
        }
    }
}

Finally we can write the watcher which only listens for scss files in my application folder and the bootstrap one.

watch: {
  {
    files: ['stylesheets/*.scss', 'bootstrap-sass-official/assets/stylesheets/**.scss'],
    tasks: ['sass']
  }
}

Including the watch response time this solution is now taking around 1.6s compared with around 6.9s.

Older Posts