Grunt, Less, and File Watching

Question

I'm trying to get grunt working to do something. My project looks like this:

/app     /assets         /components         /stylesheets             /less                 /file1.less                 /file2.less                 /file3.less                 /importAll.less             /css 

I want it so that when file1, file2, or file3 are saved the importAll.less file is compiled into css and put into /css/style.css. This is as far as I got.

less: {     development: {         options: {             paths: ["./assets/stylesheets/less"],             yuicompress: true         },         files: {             "./assets/stylesheets/css/style.css": "./assets/stylesheets/less/importAll.less"         }     } } 

I'm not sure how to get the file watcher working.

Answer 1

I got it working with the following!

module.exports = function(grunt) {     grunt.initConfig({         less: {             development: {                 options: {                     paths: ["./assets/stylesheets/less"],                     yuicompress: true                 },                 files: {                     "./assets/stylesheets/css/style.css": "./assets/stylesheets/less/style.less"                 }             }         },         watch: {             files: "./assets/stylesheets/less/*",             tasks: ["less"]         }     });     grunt.loadNpmTasks('grunt-contrib-less');     grunt.loadNpmTasks('grunt-contrib-watch'); };