Browser-sync not opening index.php (using Gulp) - php

Question

I am having an issue where browsersync does not find/open my index.php file.
The relevant parts of my gulp file are as follows:
const browserSync = require("browser-sync").create();
const php = require('gulp-connect-php');
// Configure PHP server
gulp.task('php', function(){
php.server({base:'./', port:8010, keepalive:true});
});
// Inject php config into browserSync task
gulp.task('browserSync', function() {
browserSync.init({
proxy:'localhost:8000',
port: 8080,
baseDir: './',
open:true,
notify:false
});
});
// Watch files
function watchFiles() {
gulp.watch("./scss/**/*", css);
gulp.watch(["./js/**/*", "!./js/**/*.min.js"], js);
gulp.watch("./**/*.php", browserSync.reload);
gulp.watch("./**/*.html", browserSync.reload);
}
const watch = gulp.series(build, gulp.parallel(watchFiles, browserSync.reload));
// Export tasks
exports.watch = watch;
My console output when 'Gulp watch' is run looks like this:
The page never opens in the browser.
Any advice as to why it is getting hung up on browser-sync?
Also, browsersync works when run directly in the cmd with:
browser-sync start --proxy "localhost/BtcMiningContracts" --files "*.php, *.html, css/*.css, ./js/**/*"
thanks!

Answer 1

Many hours of searching have resulted in a working answer.
For anyone else experiencing the same issue, the updated code is below:
const browserSync = require("browser-sync");
const php = require('gulp-connect-php');
// Configure PHP server
gulp.task('connect-sync', function() {
php.server({}, function (){
browserSync({
proxy: '127.0.0.1:8000'
});
});
gulp.watch('**/*.php').on('change', function () {
browserSync.reload();
});
});
// Watch files
function watchFiles() {
gulp.watch("./scss/**/*", css);
gulp.watch(["./js/**/*", "!./js/**/*.min.js"], js);
gulp.watch("./**/*.php").on('change', function () {
browserSync.reload()});
}
This works with scss
hope it helps somebody out :)