如何使用 G运行tJS Watch 运行 多个 LESS 任务？

Question

我有以下Gruntfile.js。我的 bootstrap.less 文件有大量导入，其中还包括所有插件的 CSS 代码。因此，每当我对任何 less 文件进行更改时，bootstrap 需要 5-20 秒来编译。有什么办法可以让我有两个不同的 less 任务，所以每当 bootstrap 的任何导入文件发生变化时，只有 运行 与 bootstrap 和另一个任务 运行 仅当 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');

};