Gulp 4 + Stylus + Browser Sync.

gulpfile.js

const { src, dest, series, watch } = require('gulp')
const stylus = require('gulp-stylus')
const plumber = require('gulp-plumber')
const browserSync = require('browser-sync')
const sourcemaps = require('gulp-sourcemaps')
const clean = require('gulp-clean')

const server = browserSync.create();

const url = 'site.local'; // Change me

const path = {
    stylus: {
      src: './stylus/main.styl',
      dist: './dist/css',
    }
}

function cleanTask() {
  src('./dist/', { read: false, allowEmpty: true })
    .pipe(clean())
}

function stylusTask() {
  return src(path.stylus.src)
    .pipe(plumber())
    .pipe(sourcemaps.init())
    .pipe(stylus({ compress: true }))
    .pipe(sourcemaps.write('.'))
    .pipe(dest(path.stylus.dist))
    .pipe(server.stream())
}

function reloadTask(done) {
  server.reload();
  done();
}

function startTask(done) {
  server.init({
    proxy: url,
    open: false,
    ghostMode: false
  });
  done();
}

function watchTask() {
  watch('stylus/*/*.styl', stylusTask);
  watch('includes/*/*.php', reloadTask);
  watch('public/js/*.js', reloadTask);
  watch('admin/js/*.js', reloadTask);
}

exports.default = series(cleanTask, stylusTask, startTask, watchTask);

package.json

{
  "devDependencies": {
    "browser-sync": "^2.26.7",
    "gulp": "^4.0.2",
    "gulp-plumber": "^1.2.1",
    "gulp-sourcemaps": "^2.6.5",
    "gulp-stylus": "^2.7.0",
    "gulp-clean": "^0.4.0"
  }
}

Another one from posykrat:
https://github.com/posykrat/dfwp/blob/master/build/gulpfile.js