How do I get Browsersync working in my wordpress container?

I can’t find any info on this, so here goes:

I’ve got a Wordpress/MySQL docker container, which I use for developing themes & plugins. I access this on localhost:8000.

It uses a Gulp build process & I am trying to add browsersync to the mix. I’m having a hard time getting the browsersync to actually proxy out of the container. From the Gulp output I can see that its generating the changes, just not actually making any changes in the browser.

Heres my docker-compose.yml, and my gulpfile. I’m hoping someone can help.

docker-compose.yml

version: '2'

services:
wordpress_db:
    image: mariadb
    restart: 'always'
    ports:
        - 3360:3306
    volumes:
        - ./db_data:/docker-entrypoint-initdb.d
    environment:
        MYSQL_ROOT_PASSWORD: wordpress
        MYSQL_DATABASE: wordpress

wordpress:
    depends_on:
        - wordpress_db
    image: wordpress
    restart: 'always'
    environment:
        WORDPRESS_DB_NAME: wordpress
        WORDPRESS_DB_USER: root
        WORDPRESS_DB_PASSWORD: wordpress
    ports:
        - 8000:3000
    volumes:
        - ./uploads:/var/www/html/wp-content/uploads
        - ./plugins:/var/www/html/wp-content/plugins
        - ./theme:/var/www/html/wp-content/themes/theme
    links:
        - wordpress_db:mysql

composer:
    image: composer/composer:php7
    depends_on:
        - wordpress
    restart: 'no'
    environment:
        ACF_PRO_KEY: this_would_be_my_ACF_pro_key_:)
    volumes_from:
        - wordpress
    working_dir: /var/www/html/wp-content/themes/theme
    command: install

node:
    restart: 'no'
    image: node:slim
    depends_on:
        - wordpress
    volumes_from:
        - wordpress
    working_dir: /var/www/html/wp-content/themes/theme
    build:
        context: .
        dockerfile: WordpressBuild
        args:
            - SITE_VERSION=0.0.1

Gulpfile.js

var browserSync  = require('browser-sync');
var reload      = browserSync.reload; 
var watchify     = require('watchify');
var browserify   = require('browserify');
var source       = require('vinyl-source-stream');
var buffer       = require('vinyl-buffer');
var gulp         = require('gulp');
var gutil        = require('gulp-util');
var gulpSequence = require('gulp-sequence');
var processhtml  = require('gulp-minify-html');
var sass         = require('gulp-sass');
var autoprefixer = require('gulp-autoprefixer');
var watch        = require('gulp-watch');
var cleanCSS    = require('gulp-clean-css');
var uglify       = require('gulp-uglify');
var streamify    = require('gulp-streamify');
var sourcemaps   = require('gulp-sourcemaps');
var concat       = require('gulp-concat');
var babel        = require('gulp-babel');
var fontawesome  = require('node-font-awesome');
var prod         = gutil.env.prod;

var onError = function(err) {
  console.log(err.message);
  this.emit('end');
};

// bundling js with browserify and watchify
var b = watchify(browserify('./src/js/app', {
  cache: {},
  packageCache: {},
  fullPaths: true
}));

gulp.task('js', bundle);
b.on('update', bundle);
b.on('log', gutil.log);

function bundle() {
  return b.bundle()
    .on('error', onError)
    .pipe(source('app.js'))
    .pipe(buffer())
    .pipe(sourcemaps.init())
    .pipe(prod ? babel({
      presets: ['es2015']
    }) : gutil.noop())
    .pipe(concat('app.js'))
    .pipe(!prod ? sourcemaps.write('.') : gutil.noop())
    .pipe(prod ? streamify(uglify()) : gutil.noop())
    .pipe(gulp.dest('./assets/js'))
    .pipe(browserSync.stream());
}

// fonts
gulp.task('fonts', function() {
  gulp.src(fontawesome.fonts)
    .pipe(gulp.dest('./assets/fonts'));
});

// sass
gulp.task('sass', function() {
  return gulp.src('./src/scss/**/*.scss')
    .pipe(sourcemaps.init())
      .pipe(sass({
        includePaths: [].concat(require('node-bourbon').includePaths, ['node_modules/foundation-sites/scss', 'node_modules/motion-ui/src', fontawesome.scssPath])
      }))
      .on('error', onError)
      .pipe(prod ? cleanCSS() : gutil.noop())
      .pipe(prod ? autoprefixer({
        browsers: ['last 2 versions'],
        cascade: false
      }) : gutil.noop())
    .pipe(!prod ? sourcemaps.write('.') : gutil.noop())
    .pipe(gulp.dest('./assets/css'))
    .pipe(browserSync.stream());
});

gulp.task('watch', function(){
  gulp.watch('./src/scss/**/*.scss', ['sass']);
  gulp.watch('./src/js/**/*.js', ['js']);
});

// browser-sync task for starting the server.
gulp.task('serve', function() {
    //watch files
    var files = [
    './assets/css/*.scss',
    './*.php'
    ];

    //initialize browsersync
    browserSync.init(files, {
    //browsersync with a php server
    proxy: "localhost",
    notify: false
  });
  gulp.watch('./src/scss/**/*.scss', ['sass']);

    // gulp.task('default', gulpSequence(['fonts', 'sass', 'js', 'watch']));
});

// use gulp-sequence to finish building html, sass and js before first page load
gulp.task('default', gulpSequence(['fonts', 'sass', 'js'], 'serve'));

I’ve posted his on Stackoverflow also. FYI I’m curently experimenting with this https://github.com/ustwo/docker-browser-sync/blob/master/README.md