Gulp.js事件流合并顺序 [英] Gulp.js event stream merge order

问题描述

我正在尝试将css和scss文件合并到构建目录中的main.css文件中。
工作，但顺序不正确。来自scss文件的样式属性必须位于main.css文件的底部，以便它们覆盖其余部分。

I am trying to merge css and scss files into a main.css file that goes in my build directory. Its working, but not in the right order. The style attributes from the scss files need to be in the bottom of the main.css file so they overrule the rest.

我的Gulp任务看起来像这样：

my Gulp task looks like this:

    //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中。

I am defining the sources first with variables. I am using the gulp-sass plugin to convert the scss file into normal css (.pipe(sass)) and later merging the two with the es.merge function and concatenating them into main.css.

问题是.scss文件的样式属性最终位于main.css文件的顶端。我需要他们在最底层。因此，需要将它们连接在底部。

The problem is that the style attributes van the .scss files end up somewhere in the top end of the main.css file. I need them to be at the bottom. So they need to be concatenated at the bottom.

关于如何执行此操作的任何线索吗？

Any clue on how to do this?

推荐答案

尝试流队列。

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 在这里。

This cheatsheet will help you. PDF is here.

这篇关于Gulp.js事件流合并顺序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！