Gulp.js Ereignisstrom Zusammenführungsreihenfolge

Question

Ich versuche, css und scss-Dateien in eine main.css-Datei zusammenzuführen, die sich in meinem Build-Verzeichnis befindet. Es funktioniert, aber nicht in der richtigen Reihenfolge. Die Stilattribute aus den scss-Dateien müssen sich am Ende der main.css-Datei befinden, damit sie den Rest überschreiben.

meine Gulp Aufgabe sieht wie folgt aus:

//CSS 
gulp.task('css', function() { 
    var cssTomincss = gulp.src(['dev/css/reset.css', 'dev/css/style.css','dev/css/typography.css', 'dev/css/sizes.css']); 

    var cssFromscss = gulp.src(['dev/css/*.scss']) 
     .pipe(sass()); 

    return es.merge(cssTomincss, cssFromscss) 
     .pipe(concat('main.css')) 
     .pipe(minifyCSS()) 
     .pipe(gulp.dest('build/css')) 
}); 

ich die Quellen mit Variablen zuerst am definieren. Ich verwende das Gulp-Sass-Plugin, um die scss-Datei in normales css (.pipe (sass)) zu konvertieren und später die beiden mit der es.merge-Funktion zusammenzufassen und sie in main.css zu verketten.

Das Problem ist, dass die Stilattribute der .scss-Dateien irgendwo im oberen Ende der main.css-Datei landen. Ich brauche sie ganz unten. Sie müssen also unten zusammengefügt werden.

Irgendwelche Hinweise, wie man das macht?

Answer 1

Versuchen Sie streamqueue.

var streamqueue = require('streamqueue'); 

gulp.task('css', function() { 
    return streamqueue({ objectMode: true }, 
      gulp.src(['dev/css/reset.css', 'dev/css/style.css', 'dev/css/typography.css', 'dev/css/sizes.css']), 
      gulp.src(['dev/css/*.scss']).pipe(sass()) 
     ) 
     .pipe(concat('main.css')) 
     .pipe(minifyCSS()) 
     .pipe(gulp.dest('build/css')) 
}); 

This cheatsheet wird Ihnen helfen. PDF ist hier.

Answer 2

Es scheint, dass das Plugin gulp-order passt perfekt in Ihrem Fall.

Es Ihnen die übergebene stream mit Ihren eigenen glob Mustern, zum Beispiel basierend auf Ihrem Code neu zu ordnen kann:

return es.merge(cssTomincss, cssFromscss) 
    .pipe(order([ 
     'dev/css/reset.css', 
     'dev/css/style.css', 
     'dev/css/typography.css', 
     'dev/css/sizes.css', 
     'dev/css/*.css', 
    ])) 
    .pipe(concat('main.css')) 
    .pipe(minifyCSS()) 
    .pipe(gulp.dest('build/css')) 

Ein Nachteil ist, dass Sie Ihre globs erneut zu erklären, aber Sie können umgehen, indem Sie Ihre globs auf einen Wert zuweisen und dann in Ihnen order Rohr, viel sauberer concat.

Sie müssen die base Option . von schluck Ordnung wie in ihrer Readme angegeben, wenn die Dateien nicht korrekt bestellt wurden gesetzt werden.

Man würde eine andere Art und Weise stream-series, im Grunde das gleiche wie Event-Stream-, aber die Reihenfolge der Strom erhalten bleibt zu verwenden, und Sie müssen nicht Ihre globs umschreiben.

Answer 3

Ich versuchte gulp-order ohne Erfolg: die Bestellung wurde irgendwie nicht berücksichtigt.

Die Lösung, die für mich gearbeitet wurde mit stream-series, von Aperçu erwähnt.

return streamSeries(
    cssTomincss, 
    cssFromscss) 
    .pipe(concat('main.css')) 
    .pipe(minifyCSS()) 
    .pipe(gulp.dest('build/css')); 

Answer 4

Ich scheiterte mit allen bereitgestellten Antworten, sie erzeugten einige stille Fehler. Schließlich merge2 arbeitete für mich (scheint wie es war gulp-merge und später wurde das Projekt in merge2 umbenannt). Ich bin mir nicht sicher, warum in streamify Plugin, z. Streams, die mit Rollup erstellt wurden, können "Stream nicht unterstützte Fehler" mit gulp-concat, gulp-uglify oder gulp-insert erzeugen.

const mergeStreams = require('merge2'); 
const streamify = require('streamify'); 
... 
gulp.task('build',() => { 
    const streams = sources.map(createJSFile); 
    return mergeStreams(...streams) 
     .pipe(streamify(concat('bundle.js'))) 
     .pipe(streamify(uglify())) 
     .pipe(gulp.dest('./dist')); 
});