bu kullanarak, ben css dosyalarına bütün az dosyalarını dönüştürmek için hırıltı kullanmak

Question

css dosyalarına tüm az dosyaların yerini homurdanıyorsun:

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

Bu sürümde 0.3.0 çalıştı, ama şimdi v0 yükseltilmiş olması .4.0 artık çalışmıyor.

Aşağıdaki kod (hedefte * kullanılmıyor) her iki sürümde de çalışır, bu nedenle sorun hedef dosyadaki yıldızla ilgilidir.

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

Herhangi bir fikir?

Answer 1

Bu bir hata değildir. Grunt, bu yapılandırmayı kullanarak dest numaralı telefondan globbing'i artık desteklemiyor. Ancak, bu gibi "dosyaları dizisi" biçimini kullanabilirsiniz:

Ayrıca

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

, sen Bootstrap gibi bir kütüphane kullanmak ve ayrı, ayrı bir CSS dosyası içine her AZ dosya (parça) kurmak istiyorsanız, "kutunun dışında" başarmak çok kolay değil. Bunun nedeni, her bir LESS dosyasının, variables.less ve mixins.less için (forms.less ve navbar.less gibi başka bir çift) kendi @import ifadelerine sahip olması gerekmesidir, çünkü bunlar başka dosyalarda başvurulanlardır).

, bu gerçekten kolay hale Grunt eklentisi, assemble-less denemek için (: Ben projenin maintainers'ı biriyim ve ben less.js için çekirdek ekibinde ayrıca olduğum sorumluluk reddi). Bir araya getirmek, Tyler Kellen tarafından katkısı az olan bir çatapattır, ancak ihtiyacınız olanı gerçekleştirecek bazı deneysel özellikler ekler (eğer kararlılık istiyorsanız, lütfen katılıma katkıda bulunun). Örneğin:

// 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 özelliği esasen kaynak dosyaları üzerine belirtilen @import ifadeleri ekler. reference seçeneği, yalnızca daha az dosyalara "referans" sunarken, yalnızca özel olarak mixins veya :extend ile başvurulan stilleri çıktı olarak verir. Önyükleme grafikleri, forms.less, buttons.less vb. Gibi diğer bileşenlerden çapraz referanslar verdiğinden, burada gösterilenden daha fazla dosyaya başvurmanız gerekebilir (örnekler için bkz. the Gruntfile in assemble-less.)

Yani yukarıdaki örnekte yapılandırmayla assemble-less görevi çalıştırdıktan sonra, assets/css klasör olurdu:

• 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

Orada bu konuda size yardımcı olacaktır diğer özellikleri vardır, ama o izin verir çünkü imports özellik süper güçlü Direktifi doğrudan Gruntfile'a eklemek.