如何在 laravel homestead 环境中使用 gulp 重新加载 browsersync？答案

【问题标题】：How to live reload browsersync using gulp in laravel homestead environment?如何在 laravel homestead 环境中使用 gulp 重新加载 browsersync？
【发布时间】：2018-07-15 09:21:11
【问题描述】：

我正在尝试在 homestead laravel 环境中使用 gulp 任务运行器运行 Browsersync。 Browsersync 在指挥官中启动，当我进行更改时，Browsersync 说它正在“重新加载浏览器”。可能是这样，但除非我手动刷新浏览器，否则我无法实时看到重新加载。

我尝试了 mix 并且效果很好，但是我使用 gulp 来 postcss，我发现很难在 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();
    });
});

我还添加了这个：

@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 设置没有任何影响。（混合运行良好...）。

请停下来:)

【问题讨论】：

你的 php 服务器在 8000 端口上运行对吗？
据我所知，它可以在任何端口上运行，就像在带有 ubuntu 的虚拟机上一样？

标签： laravel gulp watch laravel-mix browser-sync

【解决方案1】：

我不是 100% 确定您的设置如何，但我通常只使用以下命令来初始化 brwoserSync：

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

如果我的 php 服务器在本地运行，我可以通过 http://localhost:3000 访问它

所以我假设您在 IP 192.168.10.10 和端口 8000 上运行 VM Ubuntu，所以这个设置可能有效，但我还不能 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();
    });
});

【讨论】：