grunt wymienić wszystkie pliki na mniejsze pliki css

Question

używam chrząknięcie przekonwertować wszystkie moje mniejsze pliki w plikach CSS, korzystając w ten sposób:

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

To działało na wersji 0.3.0, ale teraz, kiedy został uaktualniony do v0 .4.0 to już nie działa.

Następujący kod (nie używając * w miejscu docelowym) działa w obu wersjach, więc problem dotyczy gwiazdy w pliku docelowym.

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

Masz pomysł?

Answer 1

To nie jest błąd. Grunt nie obsługuje już globowania w dest przy użyciu tej konfiguracji. Jednakże, można użyć formatu „pliki tablicy”, na przykład:

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

Ponadto, jeśli korzystać z biblioteki jak bootstrap i chcesz zbudować każdy MNIEJ plik (component) do odrębnego, indywidualnego pliku CSS, nie jest to łatwe do zrealizowania "po wyjęciu z pudełka". Powodem jest to, że każdy plik LESS musiałby mieć własne instrukcje @import dla variables.less i mixins.less (i kilka innych, takich jak forms.less i navbar.less, ponieważ są one przywoływane w innych plikach).

Aby to było naprawdę łatwe, wypróbuj wtyczkę Grunt, assemble-less (zrzeczenie się: jestem jednym z opiekunów projektu, a także jestem w głównym zespole dla less.js). asembler less jest rozwidleniem bez tantemu Tylera Kellena, ale dodaje pewne eksperymentalne funkcje, które pozwolą ci osiągnąć to, czego potrzebujesz (jeśli chcesz uzyskać stabilność, proszę trzymać się bez tchnienia). Na przykład:

// 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' 
     } 
     ] 
    } 
    } 
    ... 
} 

Funkcja imports zasadzie poprzedza określone @import wypowiedzi na plikach źródłowych. Opcja reference umożliwia "odniesienie" do innych mniejszych plików, podczas gdy tylko wyprowadza style, które są specyficznie przywoływane przez mixiny lub :extend. Może być konieczne odwołanie się do kilku plików więcej niż pokazano tutaj, ponieważ Bootstrap odsyła style z innych komponentów, takich jak forms.less, buttons.less, itp. (Zobacz the Gruntfile in assemble-less dla przykładów.)

Więc po uruchomieniu zadania assemble-less z konfiguracją w powyższym przykładzie, folder assets/css musiałaby:

• 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

Istnieją inne cechy, które powinny pomóc w tym, ale funkcja imports jest potężny, ponieważ pozwala dodawać dyrektywy bezpośrednio do pliku Gruntfile.