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

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

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

    //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. Мне нужно, чтобы они были внизу. Поэтому они должны быть объединены внизу.

Есть ли подсказка о том, как это сделать?

Ответы

Ответ 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'))
});

Этот чит-код поможет вам. PDF здесь.

Ответ 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 в . из gulp -order, как указано в их Readme, если файлы были неправильно упорядочены.

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

Ответ 3

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

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

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

Ответ 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'));
});