This is my base gulpfile that does everything I need. Not every project will need every component.

wsw_gulpfile.js

var gulp = require('gulp')
    watch = require('gulp-watch')
    pug = require('gulp-pug')
    browserify = require('gulp-browserify')
    sass = require('gulp-sass')
    sourcemaps = 
    browserSync = require('browser-sync').create()
    py_files = '**/*.py'
    pug_files = 'templates/**/*.pug'
    js_files = 'static/js/dev/**/*.js'
    sass_files = ['static/sass/**/*.sass', 'static/sass/**/*.scss']
    js_dest = 'static/js/dist'
    css_dest = 'static/css'
    reload = browserSync.reload
    exec = require('child_process').exec

gulp.task('pug', function(){
    return gulp.src(pug_files)
    .pipe(pug())
    .pipe(gulp.dest(''))
})

gulp.task('js', function(){
    return gulp.src(js_files)
    .pipe(browserify({debug: true}))
    .pipe(gulp.dest(js_dest))
})

gulp.task('js-watch', ['js'], function (done) {
    browserSync.reload();
    done();
});


gulp.task('sass', function(){
    return gulp.src(sass_files)
    .pipe(sass({debug: true, outputStyle: 'compressed'}))
    .pipe(gulp.dest(css_dest))
    .pipe(browserSync.stream())
})

gulp.task('sass-watch', ['sass'], function (done) {
    browserSync.reload();
    done();
});

gulp.task('browserSync', function(){
    browserSync.init(
        [pug_files, sass_files, js_files],
        {
            proxy: 'localhost:3002',
        }
        )
})


gulp.task('runserver', function() {
    var proc = exec('python app.py --debug --port 3002');
    var proc = exec('hug -f api.py --debug --port 3003');
});


gulp.task('pytest', function(){
    var proc = exec('pytest')
})

gulp.task('watch', ['runserver', 'js-watch', 'js', 'sass', 'browserSync', 'pytest'], function(){
    gulp.watch(js_files, ['js-watch'])
    gulp.watch(py_files, ['pytest', 'runserver']);
    gulp.watch(sass_files, ['sass-watch']);
    gulp.watch([js_files, pug_files], reload)
})

gulp.task('default', ['watch'])