Gulp streams out of order

[ryanaltvater]

I've tried a handful of different possible solutions to the problem I'm having, and just can't seem to get the streams to run sequentially in order. I added some logging to the stream so that I can see the order in which things are being read. I used the docs to write the below code a few different ways, but same results each time. Am I missing something? What might I be doing wrong? Thank you in advance!

Package:

"paths": {
    "src": {
        "scss": "./src/assets/scss/"
    },
    "dev": {
        "css": "./dev/assets/css/"
    },
    "dist": {
        "css": "./dist/assets/css/"
    }
},
"devDependencies": {
    "browser-sync": "^2.26.7",
    "fancy-log": "^1.3.3",
    "gulp": "^4.0.2",
    "gulp-autoprefixer": "^6.1.0",
    "gulp-clean-css": "^4.2.0",
    "gulp-environments": "^0.1.2",
    "gulp-flatten": "^0.4.0",
    "gulp-group-css-media-queries": "^1.2.0",
    "gulp-if-env": "^0.1.0",
    "gulp-load-plugins": "^2.0.0",
    "gulp-notify": "^3.0.0",
    "gulp-plumber": "^1.1.0",
    "gulp-rename": "^1.2.3",
    "gulp-sass": "^4.0.2",
    "gulp-sourcemaps": "^2.6.4",
    "gulp-strip-css-comments": "^2.0.0",
    "merge2": "^1.2.4"
}

Gulp:

const { src, dest, lastRun, watch, series } = require('gulp');
const $ = require('gulp-load-plugins') ({
    pattern: ['*'],
    scope: ['devDependencies']
});
const pkg = require('./package.json');
const browserSync = require('browser-sync').create();

function css() {
    return $.merge2(
        src([
            pkg.paths.src.scss + '**/*.scss',
            '!' + pkg.paths.src.scss + 'projects/example-project/example.scss'
        ])
            .on('end', function() {
                $.fancyLog('cssDev');
            })
            .pipe($.plumber({
                errorHandler: $.notify.onError('Error: <%= error.message %>')
            }))
            .pipe($.sourcemaps.init())
            .pipe($.sass())
            .pipe($.stripCssComments({
                preserve: false
            }))
            .pipe($.autoprefixer({
                cascade: false
            }))
            .pipe($.groupCssMediaQueries())
            .pipe($.sourcemaps.write('./'))
            .pipe($.flatten({
                includeParents: 1
            }))
            .pipe(dest(pkg.paths.dev.css))
            .pipe(browserSync.stream()),
        src([
            pkg.paths.dev.css + '**/*.css'
        ])
            .on('end', function() {
                $.fancyLog('cssDist');
            })
            .pipe($.ifEnv.includes('sandbox', 'production', $.cleanCss({
                level: {
                    2: {
                        restructureRules: true
                    }
                }
            })))
            .pipe($.ifEnv.includes('sandbox', 'production', $.rename({
                suffix: '.min'
            })))
            .pipe($.ifEnv.includes('sandbox', 'production', $.flatten({
                includeParents: 1
            })))
            .pipe($.ifEnv.includes('sandbox', 'production', dest(pkg.paths.dist.css)))
    );
};

exports.css = css;

Command:

gulp css --env production

Output:

Using gulpfile ~/Sites/red-hat/webdms/gulpfile.js
Starting 'css'...
cssDist
cssDev
Finished 'css' after 2.22 s