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

看来插件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.

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

Answer 3

我尝试了口吃顺序，但没有成功：某种程度上没有考虑顺序。

对我有用的解决方案是使用Aperçu提到的stream-series。

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