[英]grunt replace all less files into css files
我使用grunt将所有较少的文件转换为css文件,使用:
less: {
development: {
files: {
"css/*.css": "less/*.less"
}
}
}
这适用于版本0.3.0,但现在我已升级到v0.4.0,它不再起作用了。
以下代码(在目标中不使用*)适用于这两个版本,因此问题在于目标文件上的星号。
less: {
development: {
files: {
"css/test.css": "less/*.less"
}
}
}
任何的想法 ?
这不是一个错误。 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的核心团队)。 无装配是Tyler Kellen的一个笨拙的贡献,但它增加了一些实验性功能,可以实现你所需要的(如果你想要稳定性,请坚持使用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
语句@import
到源文件中。 reference
选项允许您“引用”其他较少的文件,同时仅输出通过mixins或:extend
特别引用的样式。 您可能需要引用比此处所示更多的文件,因为Bootstrap交叉引用来自其他组件的样式,例如forms.less,buttons.less等。(请参阅Gruntfile in assemble-less中的示例。)
因此,在使用上面示例中的配置运行无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添加指令。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.