CODEWITHSUNDEEP
javascriptjsongruntjsgrunt-contrib-watch
mc_dev
mc_dev

Reputation: 281

Compliling multiple folder from LESS to CSS using grunt watch?

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.

Upvotes: 0

Views: 573

Answers (2)

hakazvaka
hakazvaka

Reputation: 733

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"]
    }

Upvotes: 1

Joseph
Joseph

Reputation: 119827

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'],
}

Upvotes: 1

Related Questions