Как вживую перезагрузить браузерную синхронизацию, используя gulp в среде Laravel.

Question

Я пытаюсь запустить Browsersync с помощью gulp runner в среде усадьбы. Browsersync запускается в Commander, и когда я делаю изменение, Browsersync говорит, что это "перезагрузка браузеров". Вполне возможно, но я не могу увидеть перезагрузку в режиме реального времени, пока я не обновлю браузер вручную.

Я попробовал микс, и это сработало, но я использую gulp для postcss, который мне было трудно настроить в микс...

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

Я также добавил это:

@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

к основному файлу php приложения, но это не имело никакого значения для настройки gulp browsersync. (Микс работает нормально...).

Пожалуйста, помогите:)

Answer 1

Я не уверен на 100%, каковы ваши настройки, но я обычно запускаю brwoserSync только с:

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

если мой php-сервер работает локально, я могу получить к нему доступ по адресу http://localhost:3000/

поэтому я предполагаю, что вы используете виртуальную машину Ubuntu с IP 192.168.10.10 и портом 8000, так что эта установка может работать, но я еще не уверен на 100%

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