如何使用浏览器与 php 同步答案

【问题标题】：How to use browser sync with php如何使用浏览器与 php 同步
【发布时间】：2017-08-11 01:52:27
【问题描述】：

我想将 Browsersync 与 PHP 一起使用，但我似乎无法让它正常工作。

目前我正在使用 Gulp。是否可以将 Browsersync 与 XAMPP/MAMP 一起使用，或者使用 Gulp 插件来读取 .php 文件？

【问题讨论】：

可以用 Gulp 完成。检查this answer。请记住在打开您自己的新问题之前搜索类似的问题。我还建议检查how to ask good questions，并使用该站点的tour :)

【解决方案1】：

使用 gulp-connect-php

npm install --save-dev gulp-connect-php

然后设置你的 gulpfile.js

var gulp = require('gulp'),
    connect = require('gulp-connect-php'),
    browserSync = require('browser-sync');

gulp.task('connect-sync', function() {
  connect.server({}, function (){
   browserSync({
     proxy: '127.0.0.1:8000'
       });
    });

    gulp.watch('**/*.php').on('change', function () {
      browserSync.reload();
    });
});

参见文档https://www.npmjs.com/package/gulp-connect-php

这里也有很好的教程https://phpocean.com/tutorials/front-end/automate-your-workflow-with-gulp-part-3-live-reloading/23

【讨论】：

您链接到的教程适用于 gulp 3，与 gulp 4 结合使用时会中断。当前的稳定版本。仍在为 gulp-connect-php 和其他方便的 gulp 选项寻找一个好的 v4 教程。由于在我的情况下提供了错误的端口和基本目录...

【解决方案2】：

我有几天同样的情况，直到我发现它发生是因为我没有正确关闭我的 html 输出。 BrowserSync 需要在重新加载浏览器之前包含一些 javascript 文本。如果 html、body 标签未关闭或不存在，BrowserSync 无处包含脚本。

【讨论】：

太棒了@yeah，你拯救了我的一天！

【解决方案3】：

当使用外部服务器时，现在可以在浏览器同步中使用proxy 选项。

配置文档：https://browsersync.io/docs/options#option-proxy

// Using a vhost-based url
proxy: "local.dev"

// Using a localhost address with a port
proxy: "localhost:8888"

// Using localhost sub directories
proxy: "localhost/site1"

命令行：https://browsersync.io/docs/command-line#start

browser-sync start --proxy "localhost:8080" --files "**/*"

【讨论】：