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

Created on 10 Aug 2016 · 5Comments · Source: BrowserSync/browser-sync

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
[x] OS X

Browsersync use-case
[x] 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)

Source

mitchrenton

Most helpful comment

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 :)

shakyShane on 30 Aug 2016

👍2

All 5 comments

I have the same issue.

kunegun on 11 Aug 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 :)

shakyShane on 30 Aug 2016

👍2

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']);

unstoo on 5 Feb 2017

👍1

@unstoo this worked, thanks!

davidrhoderick on 30 Mar 2017

I know it is outdated but in case if someone will search for such problem keep in mind one thing there should be NO symbols before "" tag!!!

I had few php files including each other, and in one of them have left one letter before HTML tag was generated... I was googling few hours and did not understood what is wrong... Finally I found... :)

You can leave spaces in front, but no other symbols. Even one letter will break so example "x" will not work (letter "x").