it-swarm.com.ru

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

Я пытаюсь объединить файлы 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. Мне нужно, чтобы они были внизу. Таким образом, они должны быть соединены внизу.

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

28
Jabba Da Hoot

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

55
Tsutomu Kawamura

Кажется, что плагин 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, в основном то же самое, что event-stream, но порядок вашего потока сохраняется, и вам не нужно переписывать ваш globs.

5
Balthazar

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

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

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

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