Gulp.js flusso di eventi ordine di fusione

Question

Sto cercando di unire file css e scss in un file main.css che va nella mia directory di build. Funziona, ma non nel giusto ordine. Gli attributi di stile dei file scss devono trovarsi nella parte inferiore del file main.css in modo da sovrascrivere il resto.

mio compito Gulp è simile al seguente:

//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')) 
}); 

sto definendo la fonti di prima con le variabili. Sto usando il plugin gulp-sass per convertire il file scss in normale css (.pipe (sass)) e successivamente unendo i due con la funzione es.merge e concatenandoli in main.css.

Il problema è che gli attributi di stile dei file .scss finiscono da qualche parte nella parte superiore del file main.css. Ho bisogno che siano in fondo. Quindi hanno bisogno di essere concatenati in fondo.

Qualsiasi indizio su come farlo?

Answer 1

Prova 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 ti aiuterà. PDF è qui.

Answer 2

Sembra che il plug-in gulp-order si adatti perfettamente al tuo caso.

Esso consente di ri-ordinare il passato stream con il proprio glob modello, ad esempio in base al codice:

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')) 

Uno svantaggio di questo è che si deve ri-dichiarare il vostro globs, ma puoi andare in giro assegnando il tuo globs a un valore e quindi concatenarlo nella tua pipa order, molto più pulito.

Potrebbe essere necessario impostare l'opzione base-. di gulp-order come indicato nel loro Readme se i file non sono state ordinate in modo corretto.

Un altro modo sarebbe quello di utilizzare stream-series, fondamentalmente lo stesso come evento-stream, ma l'ordine del vostro flusso è conservato, e non c'è bisogno di riscrivere il vostro globs.

Answer 3

Ho provato gulp-order senza successo: l'ordine in qualche modo non è stato preso in considerazione.

La soluzione che ha funzionato per me stava usando stream-series, citato da Aperçu.

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

Answer 4

Non sono riuscito con tutte le risposte fornite, hanno prodotto alcuni errori silenziosi. Infine, merge2 ha funzionato per me (sembra che ci sia stato gulp-merge e in seguito il nome del progetto è stato merge2). Non sono sicuro del motivo per cui è necessario il plug-in streamify, ad es. gli stream creati con Rollup possono produrre "stream-not-supported-errors" con gulp-concat, gulp-uglify o gulp-insert.

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')); 
});