Question

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

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

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

以下代码（目的地中未使用*）适用于两个版本，因此问题在于目标文件上的星号。

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

有什么想法吗？

Answer 1

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

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的核心团队）。无装配是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语句添加到源文件中。 reference选项允许您“引用”其他较少的文件，同时仅输出通过mixins或:extend专门引用的样式。您可能需要引用比此处所示更多的文件，因为Bootstrap交叉引用其他组件的样式，例如forms.less，buttons.less等。（例如，请参阅the 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添加指令。

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

1 个答案: