Gulp.js 事件流合并顺序

2022-01-12 00:00:00 concatenation javascript gulp event-stream gulp-sass

我正在尝试将 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?

推荐答案

试试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 在这里.

相关文章