如何让 Browser-Sync 在 Gulp 4 中提供 PHP 文件答案

【问题标题】：How to get Browser-Sync to serve PHP-Files in Gulp 4如何让 Browser-Sync 在 Gulp 4 中提供 PHP 文件
【发布时间】：2020-10-17 06:22:03
【问题描述】：

我正在处理一个 gulpfile，它在处理 html/scss/js 时已经可以正常工作。现在我想让我的网站基于 PHP，并且需要 Browser-Sync 来服务我的 PHP，而不是在浏览器中显示 "Cannot GET /"。我知道当 build 文件夹中有一个 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 吗？如果是的话怎么办？这是我认为我（作为一个 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 函数上——我完全同意——未定义。非常感谢任何帮助！！！

【问题讨论】：

标签： php gulp browser-sync gulp-browser-sync gulp-connect-php

【解决方案1】：

在查看了 gulp-connect-php 的详细信息后，结果发现它只支持 PHP 5.4，所以它不是一个选项。相反，我使用了我的 XAMPP（而本地安装的 PHP + Apache 可能更优雅）并设置 browser-sync 来代理它：

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

【讨论】：