How to live reload browsersync using gulp in laravel homestead environment?

Question

I am trying to run Browsersync using gulp task runner within homestead laravel environment. Browsersync fires up in commander and when I make a change, Browsersync says it is "reloading browsers". It may well be, but I cannot see the reload in real-time unless I refresh the browser manually.

I tried mix and that worked, but I am using gulp to postcss, which I found difficult to set up in mix...

var gulp = require('gulp'),
watch = require('gulp-watch'),
browserSync = require('browser-sync').create();

gulp.task('watch', function() {

    browserSync.init(null, {
        notify: false,
        port: 8000,
        host: '192.168.10.10',
        proxy: 'test.test',
        open: false,
        files: [
                'app/**/*.php',
                'resources/views/**/*.php',
                'public/js/**/*.js',
                'public/css/**/*.css'
        ],
        watchOptions: {
                usePolling: true,
                interval: 500
        }
    });

    watch('./resources/**/*.php', function() {
        browserSync.reload();
    });
});

I also added this:

@if (getenv('APP_ENV') === 'local')
    <script id="__bs_script__">//<![CDATA[
        document.write("<script async src='http://HOST:3000/browser-sync/browser-sync-client.js?v=2.18.12'><\/script>".replace("HOST", location.hostname));
        //]]>
    </script>
@endif

to main app php file but it made no difference to gulp browsersync setup. (Mix is running fine...).

Please halp :)

Answer 1

I am not 100% sure how your setup is, but i normally init brwoserSync just with :

browserSync.init({
  proxy: 'localhost:8000'
});

if my php server is running locally, i then can access it at http://localhost:3000

so i assume you are running a VM Ubuntu at IP 192.168.10.10 and port 8000, so this setup might work, but i'm not 100% sure yet

var gulp = require('gulp'),
watch = require('gulp-watch'),
browserSync = require('browser-sync').create();

gulp.task('watch', function() {

    browserSync.init(null, {
        notify: false,
        proxy: '192.168.10.10:8000',
        open: false,
        files: [
                'app/**/*.php',
                'resources/views/**/*.php',
                'public/js/**/*.js',
                'public/css/**/*.css'
        ],
        watchOptions: {
                usePolling: true,
                interval: 500
        }
    });

    watch('./resources/**/*.php', function() {
        browserSync.reload();
    });
});