使用 Grunt，如果我有全局混入和常量，我如何编译所有 *.less 文件？

Question

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

所以我配置了grunt如下：

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

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

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

Answer 1

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

自动生成 `master.less` 文件

通过为每个 *.less 文件编写 @import 语句来创建生成 master.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。

Answer 2

感谢@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。

使用 Grunt，如果我有全局混入和常量，我如何编译所有 *.less 文件？

With Grunt, how can I compile all *.less files, if I have global mixins and constants?

gruntjs

less

grunt-contrib-less

自动生成 `master.less` 文件

less-plugin-glob

使用 Grunt，如果我有全局混入和常量，我如何编译所有 *.less 文件？

With Grunt, how can I compile all *.less files, if I have global mixins and constants?

gruntjs

less

grunt-contrib-less

自动生成 master.less 文件

less-plugin-glob

自动生成 `master.less` 文件