web-dev-qa-db-fra.com

Ordre de fusion du flux d'événements Gulp.js

J'essaie de fusionner les fichiers css et scss dans un fichier main.css qui se trouve dans mon répertoire de construction . Cela fonctionne, mais pas dans le bon ordre. Les attributs de style des fichiers scss doivent être situés au bas du fichier main.css afin de remplacer le reste.

ma tâche Gulp 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 définis d'abord les sources avec des variables. J'utilise le plugin gulp-sass pour convertir le fichier scss en css normal (.pipe (sass)), puis pour les fusionner avec la fonction es.merge et les concaténer dans le fichier main.css.

Le problème est que les attributs de style des fichiers .scss se retrouvent quelque part dans la partie supérieure du fichier main.css. J'ai besoin d'eux pour être au bas. Ils doivent donc être concaténés au bas.

Un indice sur comment faire cela?

javascriptconcatenationgulpevent-streamgulp-sass
28
Jabba Da Hoot

Essayez 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 aide-mémoire vous aidera. PDF est ici.

55
Tsutomu Kawamura

Il semble que le plugin gulp-order vous corresponde parfaitement.

Il vous permet de réorganiser la stream passée avec votre propre modèle glob, 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 cela est que vous devez re-déclarer votre globs, mais vous pouvez vous déplacer en assignant votre globs à une valeur puis les concattre dans votre pipe order, beaucoup plus propre.

Vous devrez peut-être définir l'option base sur . of gulp-order _ comme indiqué dans le fichier Lisez-moi si les fichiers n'ont pas été classés correctement.

Une autre solution consiste à utiliser stream-series, essentiellement identique à stream-stream, mais l'ordre de votre flux est préservé et vous n'avez pas à réécrire. votre globs.

5
Balthazar

J'ai essayé sans succès gulp-order: l'ordre n'a pas été pris en compte.

La solution qui a fonctionné pour moi utilisait stream-series, mentionné par Aperçu .

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

J'ai échoué avec toutes les réponses fournies, ils ont produit des erreurs silencieuses. Enfin, merge2 a fonctionné pour moi (il semble qu'il y ait eu gulp-merge et plus tard, le projet a été renommé en merge2). Je ne sais pas pourquoi il y a un besoin dans streamify plugin, par exemple. les flux créés avec Rollup peuvent générer des "erreurs de flux non pris en charge" 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'));
});
0
Alexander Shutov