Getting Docker to work with Gulp and Browsersync - node.js

Question

I'm trying to get Docker working with Gulp / Browsersync and having a lot of trouble. My docker-compose file:
# compose file for local development build
version: "3"
services:
web:
build:
context: ./webapp
args:
- NODE_ENV=development
environment:
- PORT=8080
command: npm run start-dev
restart: "no"
volumes:
- ./webapp:/app
- /app/node_modules/
ports:
- "8080:8080"
- "7000:7000"
The command runs a script in my package.json which is gulp & nodemon start.js. In theory, this should start gulp and nodemon simultaneously. I see them both starting up in the terminal, but changes to my watched files do not trigger an update.
The Dockerfile I'm referencing in the compose file is as such, which essentially just copies my app over and installs gulp globally (NODE_ENV is set to develpoment by docker-compose and the start command is overwritten to npm run start-dev):
FROM node:8.16-alpine
# env setup
ARG NODE_ENV=production
ENV NODE_ENV=${NODE_ENV}
WORKDIR /app
COPY . /app
# install npm packages
RUN npm install
RUN npm -g install nodemon#^1.19.1
RUN npm -g install gulp#^4.0.2
# compile scss (runs with browsersync in dev)
RUN if [ ${NODE_ENV} != "development" ]; then gulp; fi
# not used by heroku
EXPOSE 8080
CMD ["npm", "start"]
My gulpfile (this is where I have the least understanding as it was written by someone else). My guess is something that is has something to do with the proxy, but from what I've seen in other guides it should be correct.
const gulp = require('gulp')
const sass = require('gulp-sass')
const scsslint = require('gulp-scss-lint')
const size = require('gulp-size')
const csso = require('gulp-csso')
const autoprefixer = require('gulp-autoprefixer')
const browserSync = require('browser-sync')
const plumber = require('gulp-plumber')
const reload = browserSync.reload
const AUTOPREFIXER_BROWSERS = [
'ie >= 10',
'ie_mob >= 10',
'ff >= 30',
'chrome >= 34',
'safari >= 7',
'opera >= 23',
'ios >= 7',
'android >= 4.4',
'bb >= 10'
]
const SOURCE = {
scss: 'scss/**/*.scss',
css: 'public/css',
nunjucks: 'views/**/*.nunjucks',
html: '*.html',
js: ['/*.js', 'public/js/*.js']
}
// browser-sync task for starting the server.
gulp.task('browser-sync', function() {
browserSync({
proxy: "web:8080",
files: ["public/**/*.*"],
browser: "google chrome",
port: 7000
})
})
gulp.task('scss-lint', function(done) {
gulp.src('/' + SOURCE.scss)
.pipe(scsslint())
done()
})
// Compile, lint, and automatically prefix stylesheets
gulp.task('sass', gulp.series('scss-lint', function(done) {
let res = gulp.src(SOURCE.scss)
.pipe(plumber())
.pipe(sass({
includePaths: ['node_modules/', 'public/lib/chartist-js/dist/scss/']
}))
.pipe(autoprefixer({
browsers: AUTOPREFIXER_BROWSERS
}))
.pipe(csso(SOURCE.css))
.pipe(gulp.dest(SOURCE.css))
.pipe(size({
title: 'CSS: '
}))
// livereload for development
if (process.env.NODE_ENV === 'development') {
res.pipe(reload({
stream: true
}))
}
done()
})
)
gulp.task('bs-reload', function() {
browserSync.reload()
})
// default task to be run with `gulp`
if (process.env.NODE_ENV === 'development') {
// compile and start browsersync
gulp.task('default', gulp.series('sass', 'browser-sync', function(done) {
gulp.watch(SOURCE.scss, ['sass'])
gulp.watch([SOURCE.js, SOURCE.nunjucks, SOURCE.html], ['bs-reload'])
done()
}))
}
else {
// just compile
gulp.task('default', gulp.series('sass'))
}
module.exports = gulp