Question

我有以下bootstrap.less。我的less文件包含大量导入，其中包含所有插件的CSS代码。因此，每当我对任何less文件进行更改时，引导程序都需要5-20秒才能编译。有没有什么办法我可以有两个不同的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'); };任务，所以每当任何引导程序的导入文件发生变化时，只运行与引导程序相关的较少任务，而另一项任务仅在主程序运行时运行.less改变了。

{{1}}

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

};

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

1 个答案: