如何使Browser-Sync在Gulp 4中为PHP-文件提供服务

Question

在处理html/scss/js时，我正在处理一个已经很好工作的gulpfile。现在我想要基于PHP的站点，需要Browser-Sync来为我的PHP服务，而不是在浏览器中显示“无法获取/"。我知道，当存在index.html而不是build文件夹中的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);

我看了一些解决方案，几乎所有的都是基于古尔普3 +，这似乎不再是古尔普插件。我是不是错过了Gulp4 + Node可以直接处理这个PHP的方法？如果是，怎么做？这是我认为我(作为一个nube)最接近的解决方案：(这些只是上面脚本的更改/添加)

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的细节之后，它最终发现它只支持PHP5.4，所以它不是一个选项。相反，我使用了我的XAMPP (虽然本地安装的PHP + Apache可能更优雅)，并安装了浏览器同步来代理它：

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