問題描述

我正在嘗試將 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 在這里.

這篇關于Gulp.js 事件流合并順序的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！