Wie kann ich mehrere Dateien während des Compilierens aus dem Schluck nach css exportieren?

Question

Im Moment verwende ich Gulp für ein Projekt, das im Grunde ein CSS-Framework ist. So wie ich es tue, gerade jetzt, ich @import alle anderen .Weniger Dateien in einem einzigen app.less und es dann an die Aufgabe Gulp passieren:

// Compile 
gulp.task("compile", function() { 
    return gulp 
     .src("source/app.less") 
     .pipe(less()) 
     .pipe(concat("framework.edge.css")) 
     .pipe(gulp.dest("./dist")) 
     .pipe(
      autoprefixer({ 
       browsers: ["last 4 versions"], 
       cascade: false 
      }) 
     ) 
     .pipe(concat("framework.css")) 
     .pipe(gulp.dest("./dist")) 
     .pipe(sourcemaps.init()) 
     .pipe(
      uglify({ 
       maxLineLength: 80, 
       UglyComments: false 
      }) 
     ) 
     .pipe(concat("framework.min.css")) 
     .pipe(sourcemaps.write("./")) 
     .pipe(gulp.dest("./dist")); 
}); 

Das funktioniert ganz wie erwartet. Die Stylesheets werden zuerst kompiliert und exportiert als app.edge.css, dann wird es durch Autoprefixer übergeben, exportiert framework.css und dann den Minification-Prozess.

Das Problem ist, jetzt will ich jedes Sheet als separates Modul exportieren, wie

• grids.css
• scaffolding.css
• und so weiter ...

Wie kann ich das erreichen? Ich verstehe eigentlich nicht, welche Logik anzuwenden ist.

Answer 1

Verwenden Globbing

Wenn ein gulp Aufgaben src ist x/**/*.less die Aufgabe, alle weniger Dateien in x oder einen Unterordner von x und ausgibt jede Datei separat im dest wird verarbeiten die src ‚s Erhaltung Datei Struktur.

Um eine Datei oder Dateien auszuschließen, verwenden Sie !....

Lernen Sie die Globbing Regeln in der Glob Primer, und testen Sie Ihr Muster mit dem Glob online tester

Je nach Bedarf könnten Sie zwei Aufgaben wollen, eine für die Ausgabe einzelner Dateien und einen für die volle framework.css Gebäude.