Gulp.js事件流合并顺序

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.

我正在尝试将css和scss文件合并到我的构建目录中的main.css文件中。它的工作,但不是正确的顺序。 scss文件中的样式属性需要位于main.css文件的底部,因此它们会否决其余部分。

my Gulp task looks like this:

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

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.

我首先用变量定义源代码。我正在使用gulp-sass插件将scss文件转换为普通的css(.pipe(sass)),然后将两者与es.merge函数合并并将它们连接到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.

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

Any clue on how to do this?

有关如何做到这一点的任何线索?

4 个解决方案

#1

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

This cheatsheet will help you. PDF is here.

这个备忘单会帮助你。 PDF在这里。

4 个解决方案

#1

更多相关文章

随机推荐