咕噜替换所有文件少到CSS文件(grunt replace all less files into

2019-07-23 00:38发布

我用咕噜所有我不太文件转换成css文件,使用此:

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

这个工作在0.3.0版本,但现在我已经升级到V0.4.0它不工作了。

下面的代码(不使用*在目的地)工作在两个版本,所以这个问题是与目标文件中的明星。

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

任何的想法 ?

Answer 1:

这是不是一个错误。 咕噜不再支持通配符dest使用该配置。 但是,您可以使用“文件阵”格式,就像这样:

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

另外,如果你使用像引导库,你想给每个LESS文件(组件)建设成一个单独的,独立的CSS文件,它不是很容易做到“开箱即用”。 其原因是,每个LESS文件都需要有自己的@import语句variables.lessmixins.less (以及一些其他类似的forms.lessnavbar.less ,因为它们在其他文件中引用)。

为了使这很容易,尝试繁重的插件, 组装少 (免责声明:我是该项目的维护者之一,我也是在核心团队less.js)。 组装,少即是咕噜-contrib请少用泰勒科伦的一个分支,但它增加了一些实验性的功能,将完成你所需要的(如果你想稳定,请坚持使用咕噜-的contrib少)。 例如:

// 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选项可以让你“参考”其他减档,而只输出是通过混入特别提及或样式:extend 。 您可能需要参考一些更多的文件比在这里显示,因为从其他组件引导交叉引用样式,像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。



文章来源: grunt replace all less files into css files