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文件都需要為variables.less和mixins.less （以及其他幾個像forms.less和navbar.less ，因為它們在其他文件中引用）擁有自己的@import語句。

為了使這個變得非常簡單，請嘗試使用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語句@import到源文件中。 reference選項允許您“引用”其他較少的文件，同時僅輸出通過mixins或:extend特別引用的樣式。 您可能需要引用比此處所示更多的文件，因為Bootstrap交叉引用來自其他組件的樣式，例如forms.less，buttons.less等。（請參閱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
• 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添加指令。