按要求合并生成的 sass 事件流的 gulp 任务不起作用答案

【问题标题】：gulp task to merge generated sass event stream as required order is not working按要求合并生成的 sass 事件流的 gulp 任务不起作用
【发布时间】：2015-05-30 00:06:41
【问题描述】：

我有三个引导 sass 和另外两个 sass 文件，我正在编译并合并到一个 css 中。在引导程序上，我正在运行“uncss”以摆脱未使用的 css，但是对于其他人，我没有运行“uncss”，因为我不想要。为了合并这些，我使用“eventstream”。不幸的是，生成的组合 css 文件的顺序不符合我的要求。无论如何，引导 css 文件总是在最后打印，这会导致问题。以下是我的 gulp 任务

var eventStream = require('event-stream'),
        sass = require('gulp-sass'),
        uncss = require('gulp-uncss'),
        csso = require('gulp-csso'),
        concat = require('gulp-concat');

gulp.task('sass', function () {
    //Copy bootstrap fonts files
    gulp.src(config.sassPath + '/vendor/bootstrap-sass-3.3.2/assets/fonts/**/*')
            .pipe(gulp.dest(config.cssPath + '/fonts'));


    //compile bootstrap css, compress and remove unused css rules
    var bootstrapCss = gulp.src(config.sassPath + '/vendor/custom/custom-bootstrap.scss')
            .pipe(sass({outputStyle: 'compressed'}))
            .pipe(uncss({
                html: ['./application/public/templates/**/*.html']
            }))
            .pipe(csso());

    //Compile slick css file to compress it
    var slickCss = gulp.src(config.sassPath + '/vendor/slick/slick.scss')
            .pipe(sass({outputStyle: 'compressed'}));

    //Compile mysite css file and compress it
    var mysiteCss = gulp.src(config.sassPath + '/application/my-site.scss')
            .pipe(sass({outputStyle: 'compressed'}));

    //merge all css
    eventStream.merge(slickCss, mysiteCss, bootstrapCss)
            .pipe(concat('my-final-site.css'))
            .pipe(gulp.dest(config.cssPath + '/stylesheets'));

});

在最终生成的 my-final-site.css 中，css 按以下顺序打印

1. slick
2. my-site
3. bootstrap

我想将引导程序保持在顶部，以便我自定义的引导程序代码可以正常工作。

请帮忙。

【问题讨论】：

使用 gulp-sort 并实现其自定义排序功能.. 以获得所需的序列
谢谢，但是我如何在流上编写比较器。如果您看到我的输入是流式的。如何使用 gulp.sort() 进行控制？
阅读这里gulp-sort
把它作为答案..请接受

标签： gulp gulp-sass event-stream

【解决方案1】：

你可以这样写自定义比较器

// sort with a custom comparator 
gulp.src('./src/js/**/*.js')
.pipe(sort({
    comparator: function(file1, file2) {
        if (file1.path.indexOf('build') > -1) {
            return 1;
        }
        if (file2.path.indexOf('build') > -1) {
            return -1;
        }
        return 0;
    }
}))
.pipe(gulp.dest('./build/js'));

阅读更多关于它here

【讨论】：