Как заставить Browser-Sync обслуживать PHP-файлы в Gulp 4

Question

Я работаю над gulpfile, который уже отлично работает при обработке html/scss/js. Теперь я хочу, чтобы мой сайт был основан на PHP, и мне нужна функция Browser-Sync для обслуживания моего PHP вместо того, чтобы показывать в браузере сообщение "Cannot GET /". Я знаю, что это подразумевает некоторую проблему с путями, поскольку все это работает, когда в папке сборки есть index.html вместо index.php.

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);

Я просмотрел некоторые решения, которые почти все основаны на Gulp 3 + gulp-connect-php, которого, похоже, больше нет в Gulp-Plugins. Мне не хватает того, что Gulp4 + Node может обрабатывать этот PHP из коробки? И если да, то как? Я думаю, что это самое близкое, что я (как кусочек) пришел к решению: (Это только изменения / дополнения к сценарию выше)

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);

но это, кажется, застряло на browsersyncфункция, которая - я полностью согласен - не определена. Любая помощь очень ценится!!!

Answer 1

После изучения деталей gulp-connect-php выяснилось, что он все равно поддерживает только PHP 5.4, так что это не вариант. Вместо этого я использовал свой XAMPP (хотя локально установленный PHP + Apache мог бы быть немного более элегантным) и настроил синхронизацию браузера для прокси-сервера:

function sync(cb) {
    browserSync.init({
        proxy: 'http://localhost/malte-podolski.de/build',
        port: 3000,
    })
    cb();
}