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

Question

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

моя задача 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.

Проблема заключается в том, что атрибуты стиля в файлах.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'))
});

Эта таблица поможет вам. PDF здесь.

Answer 2

Я безуспешно пробовал глоток: заказ как-то не учитывался.

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

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

Answer 3

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

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

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