如何让浏览器同步在 Gulp 4 中提供 PHP 文件

Question

我正在处理一个gulpfile，它在处理html/scss/js时已经工作正常。现在我想让我的网站基于 PHP，并且需要浏览器同步来为我的 PHP 提供服务，而不是在浏览器中显示"无法获取/"。我知道这意味着一些路径问题，因为它都可以工作，当构建文件夹中有一个索引.html而不是索引.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插件。我是否缺少 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的细节之后，事实证明它只支持PHP 5.4，所以它不是一个选择。相反，我利用了我的XAMPP(虽然本地安装的PHP + Apache可能更优雅(并设置浏览器同步来代理它：

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