Порядок слияния потока событий Gulp.js

Question

Я пытаюсь объединить css и scss-файлы в файл main.css, который входит в мой каталог сборки. Его работа, но не в правильном порядке. Атрибуты стиля из scss-файлов должны находиться в нижней части файла main.css, чтобы они перекрыли остальные.

моя задача Глоток выглядит следующим образом:

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

я определяю источники сначала с переменными. Я использую плагин gulp-sass для преобразования scss-файла в обычный css (.pipe (sass)), а затем слияние двух с функцией es.merge и объединение их в main.css.

Проблема в том, что атрибуты стиля van .scss-файлов заканчиваются где-то в верхнем конце файла main.css. Мне нужно, чтобы они были внизу. Поэтому они должны быть объединены внизу.

Любая подсказка о том, как это сделать?

Answer 1

Попробуйте 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 поможет вам. PDF есть здесь.

Answer 2

Кажется, что плагин gulp-order идеально подходит в вашем случае.

Она позволяет изменить порядок пропущенный stream с вашим собственным glob шаблон, например, на основе кода:

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

Одним из недостатков является то, что вы должны повторно объявить globs, но вы можете обойтись, присвойв свой globs значению, а затем контактируйте их в вас. order труба, намного чище.

Вы, возможно, придется установить base опцию . из глотком порядка, как указано в их Readme, если файлы не были правильно упорядочены.

один другой путь будет использовать stream-series, в основном такие же, как EVENT-поток, но порядок вашего потока сохраняется, и вам не придется переписывать свой globs.

Answer 3

Я пробовал gulp-order без успеха: заказ как-то не был учтен.

Решение, которое работало на меня использует stream-series, упоминаемый Aperçu.

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

Answer 4

Я потерпел неудачу со всеми предоставленными ответами, они произвели некоторые бесшумные ошибки. Наконец merge2 работал для меня (похоже, был gulp-merge, а позже проект был переименован в merge2). Я не уверен, почему существует необходимость в плагине streamify, например. потоки, созданные с помощью Rollup, могут создавать «ошибки, не поддерживаемые потоком», с gulp-concat, gulp-uglify или 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')); 
});