这不是一个 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)。例如:
grunt.initConfig({
less: {
components: {
options: {
imports: {
reference: [
"bootstrap/mixins.less",
"bootstrap/variables.less"
]
}
},
files: [
{
expand: true,
cwd: 'bootstrap/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 添加指令。