4

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

所以我配置grunt如下：

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

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

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

4

2 回答 2

4

感谢@seven-phases-max 提供以下答案！

少插件全局

允许您在@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。

于 2015-05-28T16:48:04.357 回答
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.

于 2015-05-27T06:14:49.687 回答