Make Grunt watch for LESSCSS changes

Watching for less file changes is important for a quick and solid workflow with the CSS precompiler. Let's have a look at how you can make Grunt, the JavaScript task runner watch for changes in your LESS files and compile them to CSS automatically.

We're going to write a Gruntfile.js that allows us to simply type grunt watch to watch for changes in the .less file and will compile it to a compressed css file.

TLDR;

Dependencies

npm install -g bower grunt

We will use bower to install bootstrap later, so we don't have to go to a website, download and unzip a file. Workflow baby!

The Grunt Watch Less Gruntfile

Gruntfile.js
bower.json
bower_components
css 

The Gruntfile.js I found on stackoverflow and tweaked it for my purposes. Thanks to Thomas Reggi at this point! Here's the contents of my Gruntfile.js:

	module.exports = function(grunt) {
	grunt.initConfig({
		// running `grunt less` will compile once
		less: {
			development: {
				options: {
					paths: ["./css"],
					yuicompress: true
				},
			files: {
				"./css/style.css": "./css/style.less"
			}
		}
	},
	// running `grunt watch` will watch for changes
	watch: {
		files: "./css/*.less",
		tasks: ["less"]
	}
});
	grunt.loadNpmTasks('grunt-contrib-less');
	grunt.loadNpmTasks('grunt-contrib-watch');
};

In order for this to work, we need to run the following inside our project directory:

npm install grunt grunt-contrib-less grunt-contrib-watch
grunt watch

Now Grunt will watch our css directory and compile the file that we specified in the less task.

Using Boostrap Less with Grunt

Wrapping up