我使用grunt将所有less文件转换为css文件,使用以下命令:
less: {
development: {
files: {
"css/*.css": "less/*.less"
}
}
}
这个在0.3.0版本上工作,但是现在我已经升级到v0.4.0了,它不再工作了。
下面的代码(在目标文件中没有使用*)在两个版本上都可以工作,所以问题出在目标文件上的星号上。
less: {
development: {
files: {
"css/test.css": "less/*.less"
}
}
}
这不是一个bug。Grunt不再支持使用该配置的dest
中的globbing。但是,您可以使用"files array"格式,如下所示:
files: [
{
expand: true,
cwd: 'src',
src: ['*.less'],
dest: 'assets/css/',
ext: '.css'
}
]
另外,如果你使用像Bootstrap这样的库,并且你想要将每个LESS文件(组件)构建成一个单独的、独立的CSS文件,那么"开箱操作"并不是很容易完成的。原因是每个LESS文件都需要为variables.less
和mixins.less
(以及像forms.less
和navbar.less
这样的几个其他文件,因为它们在其他文件中被引用)拥有自己的@import
语句。
为了让这变得更简单,尝试Grunt插件,无汇编(免责声明:我是项目的维护者之一,我也是less.js的核心团队成员)。assembly -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
选项允许您"引用"其他较少的文件,而只输出通过mixins或:extend
特别引用的样式。您可能需要引用比这里显示的更多的文件,因为Bootstrap交叉引用来自其他组件(如表单)的样式。少,按钮。
assemble-less
任务后,assets/css
文件夹将具有:
-
alerts.css
-
badges.css
-
breadcrumbs.css
-
button-groups.css
-
buttons.css
-
carousel.css
-
close.css
-
code.css
-
component-animations.css
-
dropdowns.css
-
forms.css
-
glyphicons.css
-
grid.css
-
input-groups.css
-
jumbotron.css
-
labels.css
-
list-group.css
-
media.css
-
modals.css
-
navbar.css
-
navs.css
-
normalize.css
-
pager.css
-
pagination.css
-
panels.css
-
popovers.css
-
print.css
-
progress-bars.css
-
responsive-utilities.css
-
scaffolding.css
-
tables.css
-
theme.css
-
thumbnails.css
-
tooltip.css
-
type.css
-
utilities.css
-
wells.css
还有其他功能可以帮助您完成此操作,但是 imports
功能非常强大,因为它允许您直接向Gruntfile添加指令。