javascript - grunt 将所有 less 文件替换为 css 文件

Question

我使用 grunt 将所有 less 文件转换为 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 中进行通配。但是，您可以使用“文件数组”格式，如下所示:

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 的核心团队成员)。 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'
        }
      ]
    }
  }
  ...
}

import 功能本质上是将指定的 @import 语句添加到源文件中。 reference 选项允许您“引用”其他 less 文件，同时仅输出通过 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
• 组件动画.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
• 分页.css
• panels.css
• popovers.css
• print.css
• progress-bars.css
• responsive-utilities.css
• 脚手架.css
• tables.css
• 主题.css
• thumbnails.css
• tooltip.css
• type.css
• utilities.css
• wells.css

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