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

我首先用变量来定义源。我正在使用main.css插件将scss文件转换为普通css (.pipe(sass))，然后将两者与es.merge函数合并，并将它们连接到main.css中。

问题是样式属性van .scss文件最终位于main.css文件的顶部。我需要他们在底部。所以他们需要在底部连在一起。

知道该怎么做吗？

Answer 1

试试流队列。

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

似乎插件吞咽顺序完全适合您的情况。

它允许您使用自己的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顺序的.，如其自述。

另一种方法是使用流系列，基本上与事件流相同，但是您的流的顺序是保留的，您不必重写您的globs。

Answer 3

我尝试了吞咽顺序，但没有成功:不知何故，订单没有被考虑在内。

对我有用的解决方案是使用流系列，这是阿帕苏提到的。

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