Как лучше настроить сборщик стилей для мгновенного отображения изменений в работе?

Возникла проблема, не могу понять как собрать мои стили с двух папок, и при этом мнговенно отображать изменения в браузере при правках в этих файлах.

Есть 2 соседние папки со styl-файлами: helpers и blocks. Я хочу чтобы все эти файлы соединялись в один, и при вводе команды gulp serve (где происходит все соединения и компилирования и отправляются на локальный браузер через browsersync) мнгновенно отображались все правки которые я вношу в стили. Структура проекта примерно такая


Вот мой gulpfile.js. Мучают 2 проблемы:
1. Как запихнуть таск concatcss (с соедининением всех стилей в один) в gulp serve
2. Как запихнуть 2 директории в concatcss

const gulp = require('gulp');
const stylus = require('gulp-stylus');
const autoprefixer = require('gulp-autoprefixer');
const run = require('run-sequence');
const del = require('del');
const server = require('browser-sync').create();
const pug = require('gulp-pug');
const prettify = require('gulp-html-prettify');
const concatCss = require('gulp-concat-css');

gulp.task('pug', function() {
  return gulp.src('src/pages/*.pug')
    .pipe(pug({ pretty: true }))
    .pipe(gulp.dest('src'))
});

gulp.task('pretty', function() {
  gulp.src('./src/*.html')
    .pipe(prettify({ indent_char: ' ', indent_size: 2 }))
    .pipe(gulp.dest('./src/'))
});

gulp.task('styl', function() {
  return gulp.src('src/blocks/**/*.styl')
    .pipe(stylus())
    .pipe(autoprefixer({
      browsers: ['last 4 versions'],
      cascade: true
    }))
    .pipe(gulp.dest('src/css/blocks'));
});

gulp.task('concatcss', function () {
  return gulp.src('src/css/blocks/**/*.css')
    .pipe(concatCss("bundle.css"))
    .pipe(gulp.dest('src/css'));
});

gulp.task('serve', ['styl'], function() {
  server.init({
    server: 'src',
    notify: true,
    open: true,
    cors: true,
    ui: false
  });
  gulp.watch('src/blocks/**/*.styl', ['styl']);
  gulp.watch('src/helpers/pug/*.pug', ['pug']).on('change', server.reload);
  gulp.watch('src/pages/*.pug', ['pug']).on('change', server.reload);
  gulp.watch('src/blocks/**/*.pug', ['pug']).on('change', server.reload);
  gulp.watch('src/css/main.css').on('change', server.reload);
  run(
    'pretty'
  );
});

gulp.task('build', function(fn) {
  run(
    'clean',
    'copy',
    'styl',
    fn
  );
});

gulp.task('copy', function() {
  return gulp.src([
      'src/fonts/**',
      'src/img/**',
      'src/js/**',
      'src/css/**',
      'src/*.html',
    ], {
      base: 'src'
    })
    .pipe(gulp.dest('build'));
});

gulp.task('clean', function() {
  return del('build');
});

Как по-грамотному тут все сделать? Буду рад любым советам