gruntjs - 如何使用 GruntJS Watch 运行多个 LESS 任务？

Question

我有以下Gruntfile.js。我的bootstrap.less文件有大量的导入，其中还包括所有插件的 CSS 代码。因此，每当我对任何less文件进行更改时，引导程序需要 5-20 秒来编译。有什么办法可以让我有两个不同less的任务，所以每当引导程序的任何导入文件发生变化时，它只会运行与引导程序关联的较少任务，而另一个任务只有在 main.less 改变时才会运行。

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');

};

Answer 1

尝试运行此代码：

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');

};