使用Grunt，如果我有全局mixins和常量，我怎么能编译所有* .less文件？

Question

我想按模块组织我的HTML，JS和LESS。我已经在使用Grunt从我的源文件夹中编译*.js和*.html。

所以我按照以下方式配置了grunt：

grunt.initConfig({
    less: {
        ALL: {
             files: { 'compiled.css': '**/*.less' }
        }
    }
}

但是这会遇到一个主要问题：我的/helper/*.less文件中的常量和mixins无法被其他.less文件访问。
似乎grunt-contrib-less编译每个单独的.less文件，然后组合输出，但不编译任何东西＆＃34;全局＆＃34;。

我能想到的唯一解决方案是创建并维护一个master.less @import个人.less文件。但是我试图实现极其模块化的构建过程，而且我不必列出任何HTML或JS文件，所以我真的希望找到*.less解决方案！

Answer 1

感谢@ seven-phases-max获得以下答案！

less-plugin-glob

允许您在@import语句中使用通配符！效果很好！

// master.less
@import "helpers/**/*.less";
@import "modules/**/*.less";

您需要添加到Grunt配置的所有内容是plugins选项：

// Gruntfile.js
grunt.initConfig({
    less: {
        'MASTER': {
            src: 'master.less',
            dest: 'master.css',
            options: {
                plugins: [ require('less-plugin-glob') ]
            }
        }
    }
});

并且，不要忘记，npm install less-plugin-glob。

Answer 2

这是实现轻松开发体验的一种方式 但是，它需要生成的文件和自定义任务。

自动生成master.less文件

通过为每个master.less文件编写@import语句来创建生成*.less的任务：

grunt.registerTask('generate-master-less', '', function() {
    generateFileList({
        srcCwd: 'modules',
        src: '**/*.less',
        dest: 'less/master.less',
        header: '// THIS FILE IS AUTOMATICALLY GENERATED BY grunt generate-master-less\n',
        footer: '// THIS FILE IS AUTOMATICALLY GENERATED BY grunt generate-master-less\n',
        template: '@import "<%= filename %>";\n',
        join: ''
    });
});

function generateFileList(options) {
    var _ = grunt.util._;
    var files = grunt.file.expand({ cwd: options.srcCwd }, options.src);

    var results = files.map(function (filename) {
        return _.template(options.template, { 'filename': filename });
    });
    var result = options.header + results.join(options.join) + options.footer;
    grunt.file.write(options.dest, result);
}

然后，使用grunt-contrib-less构建master.less。