用grunt将所有的less文件替换成css文件。

Question

我使用grunt将所有的less文件转换为CSS文件，使用以下代码：

less: {
  development: {
    files: {
      "css/*.css": "less/*.less"
    }
  }
}

这段代码在0.3.0版本上能够正常工作，但是当我升级到v0.4.0时，它就无法正常运行了。

下面的代码（目标文件中不使用*）可以在两个版本上正常工作，所以问题出现在目标文件中的星号上。

less: {
  development: {
    files: {
      "css/test.css": "less/*.less"
    }
  }
}

有任何想法吗？

- edi9999

---

如果你在使用软件时发现了一个 bug，请务必前往 http://gruntjs.com/contributing 进行报告。（如果之前它能够正常工作，但升级后出现问题，那么首先要问的就是制造该软件的人）。他们有一个 IRC 频道，那将是获得答案最快的途径。 - Mike 'Pomax' Kamermans

这个问题已经在这里得到了回答：https://dev59.com/dmUp5IYBdhLWcg3wvZRV - jdewit

Answer 1

这不是一个 bug。Grunt 不再支持使用该配置在 dest 中进行 globbing。但是，你可以像这样使用“文件数组”格式：

files: [
  {
    expand: true,
    cwd: 'src',
    src: ['*.less'],
    dest: 'assets/css/',
    ext: '.css'
  }
]

另外，如果你使用像Bootstrap这样的库，并且想将每个LESS文件（组件）构建为单独的CSS文件，那么“开箱即用”并不是很容易实现。原因在于每个LESS文件都需要有自己的@import语句，引入variables.less和mixins.less（以及一些其他的，如forms.less和navbar.less，因为它们在其他文件中被引用）。

为了使这变得非常容易，可以尝试使用Grunt插件assemble-less（免责声明：我是该项目的维护者之一，并且也是less.js核心团队的成员）。assemble-less是Tyler Kellen的grunt-contrib-less的一个分支，但它添加了一些实验性的功能，能够完成你所需的内容（如果你需要稳定性，请使用grunt-contrib-less）。例如：

// Project configuration.
grunt.initConfig({

  less: {
    // Compile all targeted LESS files individually
    components: {
      options: {
        imports: {
          // Use the new "reference" directive, e.g.
          // @import (reference) "variables.less";
          reference: [
            "bootstrap/mixins.less", 
            "bootstrap/variables.less" 
          ]
        }
      },
      files: [
        {
          expand: true,
          cwd: 'bootstrap/less',
          // Compile each LESS component excluding "bootstrap.less", 
          // "mixins.less" and "variables.less" 
          src: ['*.less', '!{boot,var,mix}*.less'],
          dest: 'assets/css/',
          ext: '.css'
        }
      ]
    }
  }
  ...
}

imports 特性基本上是将指定的 @import 语句添加到源文件的开头。 reference 选项允许您“引用”其他 less 文件，而仅输出通过 mixins 或 :extend 显式引用的样式。您可能需要引用比这里显示的更多的文件，因为 Bootstrap 交叉引用其他组件（如 forms.less、buttons.less 等）的样式。（请参见 assemble-less 中的 Gruntfile 示例。）

因此，在使用上述示例中的配置运行 assemble-less 任务后，assets/css 文件夹将具有如下文件:

（接下来是一系列CSS文件名列表，略）

还有其他功能可帮助您完成此操作，但是 imports 特性非常强大，因为它允许您直接向 Gruntfile 添加指令。

- jonschlinkert

---

你说的不再支持是指什么？是指对于less指令不再支持吗？还是对于任何目标参数都不再支持？ - vdegenne