Grunt sostituire tutti i file meno in file css

Question

che uso grugnito di convertire tutti i miei meno file in file css, utilizzando questo:

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

questo ha lavorato alla versione 0.3.0, ma ora che ho aggiornato a v0 .4.0 non funziona più.

Il seguente codice (che non utilizza * nella destinazione) funziona su entrambe le versioni, quindi il problema è con la stella sul file di destinazione.

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

Qualche idea?

Answer 1

Questo non è un bug. Grunt non supporta più il globbing in dest usando quella configurazione. Tuttavia, è possibile utilizzare il formato "file allineamento", in questo modo:

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

Inoltre, se si utilizza una libreria come Bootstrap e si vuole costruire ogni file MENO (componente) in un file CSS separato, individuale, non è molto facile da realizzare "out of the box". Il motivo è che ogni file LESS avrebbe bisogno di avere le proprie istruzioni @import per variables.less e mixins.less (e un paio di altre come forms.less e navbar.less, poiché sono referenziate in altri file).

Per semplificare la procedura, prova il plug-in Grunt, assemble-less (dichiarazione di non responsabilità: sono uno dei manutentori del progetto e sono anche nel core team di less.js). assemble-less è una forchetta di grunt-contrib-less di Tyler Kellen, ma aggiunge alcune caratteristiche sperimentali che porteranno a termine ciò di cui hai bisogno (se vuoi stabilità, ti preghiamo di attaccare con grunt-contrib-less). Per esempio:

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

La caratteristica imports antepone essenzialmente gli specificati @import dichiarazioni sul file di origine. L'opzione reference consente di "fare riferimento" ad altri meno file mentre si inseriscono solo gli stili a cui si fa specifico riferimento tramite mixin o :extend. Potrebbe essere necessario fare riferimento a qualche file in più rispetto a quanto mostrato qui, poiché gli stili di riferimenti incrociati di Bootstrap da altri componenti, come forms.less, buttons.less, ecc. (Vedere the Gruntfile in assemble-less per esempi.)

Così, dopo l'esecuzione dell'attività assemble-less con la configurazione nell'esempio di cui sopra, la cartella assets/css avrebbe:

• 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

Ci sono altre caratteristiche che dovrebbero aiutare con questo, ma la caratteristica imports è super potente, in quanto ti permette aggiungere direttive direttamente al Gruntfile.