How to use browser sync with php

Question

I would like to use Browsersync with PHP, but I can't seem to get it to work properly.

Currently I am using Gulp. Is it possible to either use Browsersync with XAMPP/MAMP, or use a Gulp plugin to read .php files?

Answer 1

use gulp-connect-php

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

then setup you 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();
    });
});

see documentation https://www.npmjs.com/package/gulp-connect-php

Also there is a good tutorial here https://phpocean.com/tutorials/front-end/automate-your-workflow-with-gulp-part-3-live-reloading/23

Answer 2

I have the same situation for a few days until I figure out that it happens because I didn't close my html output properly. BrowserSync needs to include some javascript text before to reload the browser. If the html, body tags are NOT closed or NOT present, BrowserSync has nowhere to include the script.