Why isn't grunt reloading my updated less files?

Question

I'm trying to get Grunt to process my less files every time I make a change to one of the files.

I have a 'watch' task working, and it says it is processing files when I make a change, and it outputs the correct files which change, so my watch is working, but the changes I make are not being made on the css file.

My file structure is like this

-styles
   globals.less
   components.less
   -menu 
      menu.less
   -header
      header.less

The components.less file is a group of less mixins to grab the other .less files like @import "menu/menu.less";

In my grunt file, I have

less: {
      development: {
        options: {
          paths: ['./app/vendor/modern-touch-less','./app/styles']
        },
        files: {
          './app/styles/modern-touch.css':'./app/vendor/modern-touch-less/style.less',
          './app/styles/components.css':'./app/styles/components.less'
        }
      }
    },
 watch: {
      js: {
        files: ['/scripts/{,*/}*.js','/styles/{,*/}*.less'],
        tasks: ['newer:jshint:all, less'],
        options: {
          livereload: true
        }
      },
      styles: {
        files: ['./styles/{,*/}*.*','./vendor/{,*/}*.less'],
        tasks: ['less','newer:copy:styles', 'autoprefixer'],
        options: {
          nospawn: true,
          livereload: true
        }
      },
 }

When I first start the app, the less files are built into the correct components.css file, but after changing a file, the components.css file is not updated.

Grunt is started with

 grunt.task.run([
      'clean:server',
      'bower-install',
      'concurrent:server',
      'less',
      'autoprefixer',
      'connect:livereload',
      'watch',
      'karma'
    ]);

Answer 1

Perhaps you can try simplifying your configuration, by splitting tasks out to run on the appropriate set of files.

  watch: {
      js: {
        files: ['/scripts/{,*/}*.js'],
        tasks: ['newer:jshint:all'],
        options: {
          livereload: true
        }
      },
      styles: {
        files: ['./styles/{,*/}*.*','./vendor/{,*/}*.less'],
        tasks: ['less','newer:copy:styles', 'autoprefixer'],
        options: {
          nospawn: true,
          livereload: true
        }
      },
 }

In your original watch config, the watch.js.tasks array was ['newer:jshint:all, less'], which looks like a typo, should be ['newer:jshint:all', 'less']. This may fix the problem too, but I would consider just running tasks on the files that they are affected by.