26

我使用 grunt 将我所有的 less 文件转换为 css 文件，使用这个：

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

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

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

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

任何想法 ？

4

1 回答 1

45

这不是错误。Grunt 不再支持 globbingdest使用该配置。但是，您可以使用“文件数组”格式，如下所示：

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

此外，如果您使用像 Bootstrap 这样的库，并且希望将每个 LESS 文件（组件）构建成一个单独的、单独的 CSS 文件，那么“开箱即用”并不是很容易实现的。原因是每个 LESS 文件都需要有自己的and@import语句（以及其他几个类似and的语句，因为它们在其他文件中被引用）。variables.lessmixins.lessforms.lessnavbar.less

为了让这变得非常简单，请尝试使用 Grunt 插件，无汇编（免责声明：我是该项目的维护者之一，我也是 less.js 的核心团队）。assemble-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 交叉引用了来自其他组件的样式，例如 forms.less、buttons.less 等。（有关示例，请参见assemble-less 中的 Gruntfile。）

因此，在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。

于 2013-03-24T16:05:13.567 回答