使用grunt watch将多个文件夹从LESS编译为CSS？

Question

I am trying to compile Less files using grunt watch, i have 2 folders containing less files and 2 destination folders but it shows me an error:

object has no method 'indexOf;

gruntfile.js code:

module.exports = function(grunt) {
  grunt.initConfig({
    less: {
      options: {
        paths: ["./less"],
        yuicompress: true
      },
      files: [{
        expand: true,
        cwd: './less',
        src: ['*.less', '!{fonts, variable, mixins}*.less'],
        dest: './css',
        ext: '.css'
      }, {
        expand: true,
        cwd: './less',
        src: '*.less/themes',
        dest: './css/themes',
        ext: '.css'
      }],
    },
    watch: {
      files: "./less/*",
      tasks: ["less"]
    }
  });
  grunt.loadNpmTasks('grunt-contrib-less');
  grunt.loadNpmTasks('grunt-contrib-watch');

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

As u can see ;files:' option is there which includes 2 different folders.

Answer 1

You could try creating 2 targets (dunno if that's the right term for that) and separate your concerns across them. Then run them for watch . Also tweaked your watch task to monitor the themes by using deep-monitor wildcard

less : {
  options : {...},
  styles : {...},
  themes : {...},
},
watch : {
  files : './less/**/*.less',
  tasks : ['less:styles','less:themes'],
}

Answer 2

I think you should enclose this in "mode" variable, such as "development" or "production". Like this:

less: {
   development: {
      options: {
        paths: ["./less"],
        yuicompress: true
      },
      files: [{
        expand: true,
        cwd: './less',
        src: ['*.less', '!{fonts, variable, mixins}*.less'],
        dest: './css',
        ext: '.css'
      }, {
        expand: true,
        cwd: './less',
        src: '*.less/themes',
        dest: './css/themes',
        ext: '.css'
      }]
    }
  }

Also, after the "files" array, there is an extra unnecessary comma, removed in my example...

Update the watch to the following afterward:

watch: {
      files: "./less/*",
      tasks: ["less:development"]
    }