Not keeping the order of my CSS ?

[oneezy]

This might not be the right place to ask this.., but my html blocks aren't keeping the correct order when running my build task. Do you know the best way to fix this?

Consider the following scenario:

HTML

    <!-- build:css -->
    <link rel="stylesheet" href="css/zebra.css">
    <link rel="stylesheet" href="css/apple.css">
    <!-- endbuild -->

GULP FILE (gulpfile.js)

    /* HTML
    ************************************/
    gulp.task('html', function() {
      return gulp.src(config.htmlin)
        .pipe(htmlreplace({
          'css': 'css/styles.min.css'
        }))
        .pipe(htmlmin({
          sortAttributes: true,
          sortClassName: true,
          collapseWhitespace: true
        }))
        .pipe(gulp.dest(config.dist));
    });
    
    /* CSS
    ************************************/
    gulp.task('css', function() {
      return gulp.src(config.cssin)
        .pipe(sourcemaps.init())
        .pipe(autoprefixer({ browsers: ['last 4 versions'], grid: true }))
        .pipe(concat(config.cssoutname))
        .pipe(cleancss())
        .pipe(sourcemaps.write())
        .pipe(gulp.dest(config.cssout))
        .pipe(browsersync.stream());
    });

RESULT (styles.min.css)

    .apple{background:red;}.zebra{background:black;color:white;}

I know the problem exists when concatenating the files together..but I'm unsure how to get gulp-html-replace and gulp-concatenate to work together.