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

grunt replace all less files into css files

提问by edi9999

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

我使用 grunt 将我所有的 less 文件转换为 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 ?

任何的想法 ？

回答by jonschlinkert

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

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

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 @importstatements for variables.lessand mixins.less(and a couple of others like forms.lessand navbar.less, since they are referenced in other files).

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

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

The importsfeature essentially prepends the specified @importstatements onto the source files. The referenceoption 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-lessfor examples.)

该imports功能基本上将指定的@import语句添加到源文件中。该reference选项允许您“引用”其他 less 文件，同时仅输出通过 mixins 或:extend. 您可能需要引用比此处显示的更多的文件，因为 Bootstrap 交叉引用了来自其他组件的样式，例如 forms.less、buttons.less 等（有关示例，请参阅assemble-less 中的 Gruntfile。）

So after running the assemble-lesstask with the configuration in the example above, the assets/cssfolder would have:

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

• 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 importsfeature is super powerful since it allows you to add directives directly to the Gruntfile.

还有其他功能可以帮助您解决这个问题，但该imports功能非常强大，因为它允许您直接向 Gruntfile 添加指令。