Gulp.js flux d'événements de fusion de l'ordre

Je suis en train de fusionner les css et les fichiers scss dans une main.fichier css qui va dans mon répertoire de construction.
Son travail, mais pas dans le bon ordre. Les attributs de style de la scss fichiers doivent être dans le bas de la main.fichier css afin qu'ils annuler le reste.

mon Gulp tâche ressemble à ceci:

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

Je suis la définition des sources de la première avec des variables. Je suis l'aide de la gulp-sass plugin pour convertir le fichier scss en css (.pipe(sass)) et, plus tard, la fusion des deux avec les es.la fonction de fusion et la concaténation en main.css.

Le problème est que les attributs de style van la .scss fichiers se retrouvent quelque part dans le haut de la fourchette de la main.fichier css. J'ai besoin d'eux pour être à la base. De sorte qu'ils doivent être concaténés en bas.

Aucune idée de comment faire cela?

InformationsquelleAutor Jabba Da Hoot | 2014-09-28
  1. 56

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

    Cette triche va vous aider. PDF est ici.

    • Ok, c'était épique. Il a travaillé! Regardé dedans et je le comprends maintenant. Merci une tonne!!
    • Salut! Je suis en utilisant streamqueue grâce à vous.. mais en cours d'exécution dans les questions 🙁 l'esprit un coup d'oeil? stackoverflow.com/questions/28522916/...
    • streamqueue jette toujours "Impossible de passer à l'ancienne mode". À l'aide de fusion-cours d'eau et le clin d'oeil, la commande fonctionne bien.
    • Il n'a pas concat dans le bon ordre 🙁 Même si je inverser l'ordre dans streamqueue, il encore sorties de la même (mauvaise) façon. Comment est-ce que même... ?
    InformationsquelleAutor Tsutomu Kawamura
  2. 5

    Il semble que le plugin gulp-commande s'intègre parfaitement bien dans votre cas.

    Il vous permet de re-commander le passé stream avec votre propre glob modèle, par exemple en fonction de votre code :

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

    Un inconvénient de cette est que vous avez de re-déclarer votre globs, mais vous pouvez vous déplacer à affecter votre globs à une valeur et puis concat en vous order pipe, beaucoup plus propre.

    Vous pouvez avoir à définir l' base option pour . de gulp ordre comme indiqué dans leur Readme si les fichiers n'ont pas été classés correctement.

    Un autre moyen serait d'utiliser stream-series, essentiellement la même que événement-stream, mais l'ordre de votre flux est préservée, et vous ne pas avoir à réécrire votre globs.

    • parfois, il n'a pas de ramassage des chemins comme prévu. À l'aide de .pipe(order[path1, path2], { base: '.' }) résolu.
    • Hum, ont été les fichiers dans des dossiers différents? Va ajouter cette info dans ma réponse, merci.
    • Réponse très - juste un rappel pour les gens après cette réponse que vous avez besoin pour installer gulp-commande via npm et les importer dans le haut de votre gorgée de fichier.
    InformationsquelleAutor Balthazar
  3. 4

    J'ai essayé gulp-commande sans succès: l'ordre d'une certaine manière n'était pas pris en compte.

    La solution qui a fonctionné pour moi a été l'aide de stream-series, mentionné par Aperçu.

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

    Je n'ai pas réussi avec toutes les réponses, ils ont produit certains silencieux erreurs. Enfin merge2 a fonctionné pour moi (on dirait que il n'y a gulp-merge et, plus tard, le projet a été renommé en merge2). Je ne suis pas sûr de savoir pourquoi il existe un besoin dans streamify plugin, par exemple, les flux créés avec le correctif Cumulatif peut produire des "flux non prise en charge "erreurs" avec gulp-concat, gulp-uglify ou 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'));
});
    InformationsquelleAutor Aliaksandr Shutau