CODEWITHSUNDEEP
gruntjslessgrunt-contrib-watchgrunt-contrib-less
Suthan Bala
Suthan Bala

Reputation: 3299

How to run multiple LESS tasks with GruntJS Watch?

I have the following Gruntfile.js. My bootstrap.less file has tons of imports which includes all the plugins' CSS codes as well. Therefore, the bootstrap takes from 5-20 seconds to compile whenever I make a change to any less files. Is there any way I can have two different less tasks, so whenever there's a change in any of the bootstrap's imported files, that only runs the less task associated to the bootstrap and the other task that would run only if the main.less is changed.

module.exports = function(grunt) {

  // Project configuration.
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),

    less: {
      development: {
        options: {
          paths: ["../css"]
        },
        files: {
          "../css/bootstrap.css": "../less/bootstrap.less",
          "../css/main.css": "../less/main.less"
        }
      }
    },
    watch: {
      options: {
        livereload: true
      },
      less: {
        options: {
          livereload: false,
          spawn: false
        },
        files: ['../less/*.less', '../less/responsive/*.less'],
        tasks: ['less']
      }, css: {
          files: ['../css/main.css'],
          tasks: []
      }   
    }
  });

  // Less
  grunt.loadNpmTasks('grunt-contrib-less');

  // Watch
  grunt.loadNpmTasks('grunt-contrib-watch');

};

Upvotes: 1

Views: 312

Answers (1)

Ankur Anand
Ankur Anand

Reputation: 525

try running this code : 

module.exports = function(grunt) {

  // Project configuration.
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),

    less: {
      development: {
        options: {
          paths: ["../css"]
        },
        files: {
          "../css/main.css": "../less/main.less"
        }
      },
      bootstrapBuild : {
        options : {
          paths: ['../css']
        },
        files : {
          "../css/bootstrap.css": "../less/bootstrap.less",          
        }
      }
    },
    watch: {
      options: {
        livereload: true
      },
      mainCSS: {
        options: {
          livereload: false,
          spawn: false
        },
        files: ['../less/*.less', '../less/responsive/*.less', '!../less/bootstrap.less'],
        tasks: ['less: development']
      }, 
      bootstrapBuild : {
        files: ['../less/bootstrap.less'],
        tasks: ['less:bootstrapBuild']
      },
      css: {
          files: ['../css/main.css'],
          tasks: []
      }   
    }
  });

  // Less
  grunt.loadNpmTasks('grunt-contrib-less');

  // Watch
  grunt.loadNpmTasks('grunt-contrib-watch');

};

Upvotes: 2

Related Questions