4

我想从相应的 .less 文件生成 .css 部分文件

我使用 npm 提供的最新版本，grunt@0.4.0，grunt-contrib-less@0.5.0

在 Grunt 0.4 版之前，我可以简单地指定模式：

htdocs/less/*.less作为源

htdocs/css/*.css作为目的地

并且该文件夹中的所有文件htdocs/less都将生成到该文件夹​​中htdocs/css

由于 v0.4 目标模式不再起作用，文件夹中的所有文件htdocs/less都连接到一个名为*.css

如何配置它生成所有文件而不是将它们连接到一个文件中的任务。

我不想单独列出文件。

在 Grunt 文档http://gruntjs.com/configuring-tasks#files中找不到答案

谢谢你。

我的 Gruntfile.js（摘录）：

module.exports = function (grunt) {
    grunt.initConfig({
        less: {
            development: {
                files: {
                    "htdocs/css/*.css": "htdocs/less/*.less"
                }
            }
        },
    });
};
4

2 回答 2

14

您需要阅读文档中的动态构建文件对象部分。

这将是您当前配置的直接翻译：

module.exports = function (grunt) {
    grunt.initConfig({
        less: {
            development: {
                files: [{
                    expand: true,        // Enable dynamic expansion.
                    cwd: 'htdocs/less',  // Src matches are relative to this path.
                    src: ['*.less'],     // Actual pattern(s) to match.
                    dest: 'htdocs/css',  // Destination path prefix.
                    ext: '.css',         // Dest filepaths will have this extension.
                }]
            }
        },
    });
};
于 2013-03-12T20:27:15.583 回答
0

也可以看看assemble-less。它基于 grunt-contrib-less，但专门针对您想要做的事情。（完全披露，我也是该项目的维护者）。

对于这个特定的用例，assemble-less相对于 grunt-contrib-less 的优势在于它有一个concat: false选项，可以让您使用 Grunt 中的任何 src-dest 模式单独编译 LESS 文件。assemble-less 还有一个require选项可以自动将“全局”less 文件（例如 variables.less 或 mixins.less）添加到所有其他指定的 less 文件中，从而无需@import在每个 less 文件中实际添加语句。

因此，例如，使用assemble-less您可以：

  less: {
    development: {
      options: {
        concat: false
      }
      files: {
        "htdocs/css/": "htdocs/less/*.less"
      }
    }
  }
于 2013-03-17T17:59:17.060 回答