grunt将所有较少的文件替换为css文件

I use grunt to convert all my less files into css files,using this:

我使用grunt将所有较少的文件转换为css文件,使用:

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

This worked on version 0.3.0, but now that I have upgraded to v0.4.0 it doesn't work anymore.

这适用于0.3.0版本,但现在我已升级到v0.4.0,它不再起作用了。

The following code (not using * in the destination) works on both versions, so the problem is with the star on the destination file.

以下代码(在目标中不使用*)适用于这两个版本,因此问题在于目标文件上的星号。

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

Any idea ?

任何的想法 ?

1 个解决方案

#1

This isn't a bug. Grunt no longer supports globbing in dest using that configuration. However, you can use the "files array" format, like this:

这不是一个错误。 Grunt不再使用该配置支持dest中的globbing。但是,您可以使用“files array”格式,如下所示:

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

Also, if you use a library like Bootstrap and you want to build each LESS file (component) into a separate, individual CSS file, it's not very easy to accomplish "out of the box". The reason is that each LESS file would need to have its own @import statements for variables.less and mixins.less (and a couple of others like forms.less and navbar.less, since they are referenced in other files).

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

To make this really easy, try the Grunt plugin, assemble-less (disclaimer: I'm one of the maintainers of the project, and I'm also on the core team for less.js). assemble-less is a fork of grunt-contrib-less by Tyler Kellen, but it adds some experimental features that will accomplish what you need (if you want stability, please stick with grunt-contrib-less). For example:

为了使这个变得非常简单,请尝试使用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'
        }
      ]
    }
  }
  ...
}

The imports feature essentially prepends the specified @import statements onto the source files. The reference option allows you to "reference" other less files while only outputting styles that are specifically referenced via mixins or :extend. You might need to reference a few more files than shown here, since Bootstrap cross-references styles from other components, like forms.less, buttons.less, etc. (See the Gruntfile in assemble-less for examples.)

导入功能基本上将指定的@import语句预先添加到源文件中。引用选项允许您“引用”其他较少的文件,同时仅输出通过mixins或:extend特别引用的样式。您可能需要引用比此处所示更多的文件,因为Bootstrap交叉引用来自其他组件的样式,例如forms.less,buttons.less等。(请参阅Gruntfile中的无组装示例。)

So after running the assemble-less task with the configuration in the example above, the assets/css folder would have:

因此,在使用上面示例中的配置运行无组装任务之后,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

There are other features that should help you with this, but the imports feature is super powerful since it allows you to add directives directly to the Gruntfile.

还有其他功能可以帮助您,但导入功能非常强大,因为它允许您直接向Gruntfile添加指令。

#1