How to get Browser-Sync to serve PHP-Files in Gulp 4 - php

Question

I am working on a gulpfile which already works fine when its processing html/scss/js. Now I want to have my site on PHP-basis and need Browser-Sync to serve my PHP instead of showing "Cannot GET /" in the browser. I know that implies some path issue as it all works, when there is an index.html instead of an index.php in the build folder.
const {src,dest,series,parallel,watch} = require('gulp');
const del = require('del');
const browserSync = require('browser-sync').create();
const sass = require('gulp-sass');
const sourcemaps = require('gulp-sourcemaps');
const origin = './src/';
const destination = './build/';
sass.compiler = require('node-sass');
async function clean(cb) {
await del(destination);
cb();
}
function html(cb) {
src(origin + '*.html').pipe(dest(destination));
cb();
}
function php(cb) {
src(origin + '*.php').pipe(dest(destination));
cb();
}
function css(cb) {
src(origin + 'css/*.scss')
.pipe(sourcemaps.init())
.pipe(
sass({
sourcemap: true,
outputStyle: 'compressed'
})
)
.pipe(dest(destination + 'css'));
cb();
}
function js(cb) {
src(
origin + 'js/lib/jquery.min.js'
).pipe(dest(destination + 'js/lib'));
src(
origin + 'js/*.js',
).pipe(dest(destination + 'js'));
cb();
}
function watcher(cb) {
watch(origin + '**/*.html').on('change',series(html,browserSync.reload));
watch(origin + '**/*.php').on('change',series(php,browserSync.reload));
watch(origin + '**/*.scss').on('change',series(css,browserSync.reload));
watch(origin + '**/*.js').on('change',series(js,browserSync.reload));
cb();
}
function server(cb) {
browserSync.init({
notify: false,
//open: false,
server: {
baseDir: destination
}
})
cb();
}
exports.default = series(clean, parallel(html,php,css,js), server, watcher);
I looked at some solutions which almost all are based on Gulp 3 + gulp-connect-php which seems not to be amongst the Gulp-Plugins anymore. Am I missing that Gulp4 + Node can handle that PHP out of the box? And if yes how?
This is the closest I think I (as a nube) came to a solution: (These are only the changes/additions to the script above)
const phpConnect = require('gulp-connect-php');
function php(cb) {
src(origin + '*.php').pipe(dest(destination));
cb();
}
function watcher(cb) {
watch(origin + '**/*.html').on('change',series(html,browserSync.reload));
watch(origin + '**/*.php').on('change',series(php,browserSync.reload));
watch(origin + '**/*.scss').on('change',series(css,browserSync.reload));
watch(origin + '**/*.js').on('change',series(js,browserSync.reload));
cb();
}
function connectsync(cb) {
phpConnect.server({
port: 8000,
keepalive: true,
base: destination
},
function() {
browsersync({
proxy: '127.0.0.1:8000'
});
});
cb();
}
function server(cb) {
browserSync.init({
notify: false,
open: true,
server: {
baseDir: destination
}
})
cb();
}
exports.default = series(clean, parallel(html,php,css,js), connectsync, server, watcher);
but this seems to get stuck at the browsersync function which - I totally agree - is undefined.
Any help is appreciated very much !!!

Answer 1

After looking into the details of gulp-connect-php it turned out it supports only PHP 5.4 anyway so its not an option. Instead I utilized my XAMPP (while locally installed PHP + Apache might have been a liitle more elegant) and setup browser-sync to proxy to it:
function sync(cb) {
browserSync.init({
proxy: 'http://localhost/malte-podolski.de/build',
port: 3000,
})
cb();
}