How to setup a grunt file to watch and compile less files

Question

I'm trying to use grunt to compile my less files into css while in development. While at it also, watch and reload. The file I've wrote is this:

module.exports = function(grunt) {
grunt.initConfig({
    less: {
        development: {
            options: {
                compress: true,
                yuicompress: true,
                optimization: 2
            },
            files: {
                // target.css file: source.less file
                "public/css/bootstrap.css": "./public/less/bootstrap.less"
            }
        }
    },
    watch: {
        styles: {
            // Which files to watch (all .less files recursively in the less directory)
            files: ["public/less/*"],
            tasks: ['less'],
            options: {
                livereload: true,
            }
        }
    }
});

grunt.loadNpmTasks('grunt-contrib-less');
grunt.loadNpmTasks('grunt-contrib-watch');

grunt.registerTask('default', ['watch']);
};

And I have this saved as a gruntfile.js in my project root's directory. What am I doing wrong?

PS: I'm using forever to start my app and in the same terminal window I'm using the command grunt watch, however when I change my less files nothing happens.

PPS: My file structure is as follows:

root
  -- public
    -- less
    -- css

As you can see above my main less file is located at root/public/less/bootstrap.less and I'd like the css to be compiled at root/public/css/bootstrap.css

Many thanks

Answer 1

Your setup seems to be good but I found a problem here... may be it solves your Question

"public/css/bootstrap.css": "./public/less/bootstrap.less"
                             ^^

your url is same but in second appearance you have add extra "./" I think if you remove this it will work.

This is my own code and it is working fine.

module.exports = function(grunt){
    grunt.initConfig({
        //pkg:grunt.file.readJSON('package.json'),
        less:{
              development:{
                  options:{
                      compress: true,
                      yuicompress: true,
                      optimization: 2
                  },
                files:{
                    'webroot/css/meer/index/index2.css' : 'webroot/css/meer/index/index2.less'
                }
              }
        },
        watch: {
            styles:{
                options:{
                    livereload: true,
                    spawn: false,
                    event: ['added','deleted','changed']
                },
                files:['webroot/css/meer/index/*.less'],
                tasks:['less']
            }
        }
    });
    grunt.loadNpmTasks('grunt-contrib-less');
    grunt.loadNpmTasks('grunt-contrib-watch');
    grunt.registerTask('default',['watch']);
}