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

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插件,无需汇编(免责声明:我是该项目的维护者之一,而且我也是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等.(例如,请参阅无组装的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添加指令.