grunt将所有较少的文件替换为css文件 [英] grunt replace all less files into css files

问题描述

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

  less：{
开发：{
文件：{
css / *。css：less / *。less
} 
} 
} 
  

这个版本可以在0.3.0版本上运行，但现在我已经升级到v0.4.0，它不再工作了。 p>



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

  less：{
 development：{
 files：{
css / test.css：less / *。less 
} 
} 
} 
  

有什么想法吗？ p>


解决方案

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



 文件：[
 {
 expand：true，
 cwd：'src'，
 src：['* .less']，
 dest：'assets / css /'，
 ext：'。 css'
} 
] 
  

另外，如果您使用类似Bootstrap并且您希望将每个LESS文件（组件）构建到单独的单个CSS文件中，即装即用完成并不容易。原因是每个LESS文件都需要为 variables.less 和<$ c拥有自己的 @import 语句$ c> mixins.less （和其他一些像 forms.less 和 navbar.less ，因为它们是在其他文件中引用的）。

为了使这非常简单，请尝试使用Grunt插件

  //项目配置。 
 grunt.initConfig（{
 
 less：{
 //单独编译所有目标LESS文件
组件：{
 options：{
 import：{
 //使用新的reference指令，例如
 // @import（reference）variables.less; 
 reference：[
bootstrap / mixins .less，
bootstrap / variables.less
] 
} 
}，
文件：[
 {
 expand：true ，
 cwd：'bootstrap / less'，
 //编译每个LESS组件，不包括bootstrap.less，
 //mixins.less和variables.less
 src：['* .less'，'！{boot，var，mix} *。less']，
 dest：'assets / css /'，
 ext：'.css'
 
 
 
 
 
 
 code $ pre 
 
 
 进口功能基本上是将指定的 @import 语句添加到源文件中。 参考选项允许您引用其他较少的文件，同时只输出通过mixin或特别引用的样式：extend  >。您可能需要引用比此处显示的更多的文件，因为Bootstrap会交叉引用来自其他组件的样式，如forms.less，buttons.less等。（请参阅 Gruntfile in assemble-less 为例。）
所以在运行 assemble-less 任务与上面例子中的配置， assets / css 文件夹将有：
 
 
 
 
 
  alerts.css  
 
 
 徽章。 css 
  
 
  breadcrumbs.css  
 
 
  button-groups.css  
 
 
  buttons.css  
 li>  carousel.css   
 
  close.css  
 
 
  code.css  
 
 
  component-animations.css  
 
 
  dropdowns.css  
 
 
  forms.css 
 code>  
 
  glyphicons.css  
 
 
 网格的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添加指令。  
I use grunt to convert all my less files into css files,using this:
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.

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 ?
解决方案
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:
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).

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:
// 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.)

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


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. 

                        
这篇关于grunt将所有较少的文件替换为css文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！