Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Gulp, browserSync, gulp-connect php combo, browser isn't reloading

See original GitHub issue

Issue details

The contents of my gulp task (serve) are below. All of the tasks are performing as expected, in the terminal I get the message [BS] Reloading browsers... as expected. But the browser doesn’t reload. If I manually refresh, I see the changes that I’d made in either PHP, JS or CSS.

I see there is a similar issue with #871 but the solution to have 2 tasks in separate terminal windows doesn’t feel like it’s solving the issue, only a workaround.

Any help here would be greatly appreciated.

Versions of Browsersync, node and npm I’m running

Browsersync [ 3.5.3 ]
Node [ 5.5.0 ]
Npm [ 3.5.3 ]

Affected platforms

OS X

Browsersync use-case

Gulp

How I’m using BrowserSync

'use strict';
const browserSync = require('browser-sync');
const connect = require('gulp-connect-php');
const gulp = require('gulp');

// Function to properly reload your browser
function reload(done) {
  browserSync.reload();
  done();
}

gulp.task('serve', function(done) {
  connect.server({
    base: './.tmp/app',
    hostname: 'localhost',
    port: 3000
  }, function (){
    browserSync.init({
      proxy: 'localhost:8000'
    });
    done();
  });

  gulp.watch('src/app/assets/javascript/**/*.js', gulp.series('scripts', reload));
  gulp.watch('src/app/assets/scss/**/*.scss', gulp.series('styles'));
  gulp.watch('src/**/*.php', gulp.series('phplint', 'copy:php', reload));

});


gulp.task('watch', function)

Issue Analytics

State:
Created 7 years ago
Comments:5 (1 by maintainers)

Top GitHub Comments

2reactions

shakyShanecommented, Aug 30, 2016

Please check the requirements https://www.browsersync.io/docs#requirements (ie: does your page have a body tag).

Do you see the ‘Browsersync connected’ message in the browser?

If this does not help, please provide a copy/paste of your pages ‘view source’ and I can help to debug 😃

1reaction

unstoocommented, Feb 5, 2017

I’ll leave a working variant here for googlers like me.

index.php:

<!doctype html>
<html>
<body>
<?php
 $paths = explode("\\", get_include_path());
 echo '<pre>';
 print_r($paths);
?>
</body>
</html>

gulpfile.js

var gulp = require('gulp'),
    connect = require('gulp-connect-php'),
    browserSync = require('browser-sync');
 
gulp.task('connect-sync', function() {
  connect.server({  base: 'source'  },  function (){
    browserSync({     
         proxy: '127.0.0.1:8000'    
        });
  });
 
  gulp.watch('**/*.php').on('change', function () {
    browserSync.reload();
  });
});

gulp.task('default', ['connect-sync']);

Top Results From Across the Web

Endless reload with browserSync and gulp-connect-php

To be clear: I no longer make use of gulp-connect-php. // BROWSER-SYNC TASKS gulp.task('browser-sync', function() { browserSync({ proxy: ...

Homestead and Browsersync (gulp file) - Laracasts

Hi, I'm trying to integrate BrowserSync into my gulp file, but for the time being it doesn't seem to be working inside the...

Browsersync + Gulp.js

Browsersync makes your browser testing workflow faster by synchronising URLs, interactions and code changes across multiple devices.

Php – Gulp-webapp running BrowserSync and PHP – iTecNote

Specifically, I want to be able to use gulp-php-connect with multiple base directories (for the compiled CSS from Sass) and routes (for Bower...

Browser-Sync Not Opening Index.Php (Using Gulp) - ADocLib

Compare npm package download statistics over time gulp connect vs gulp serve vs ... Gulp browserSync gulpconnect php combo browser isn't reloading #1171....