Laravel Mix BrowserSync 重新加载答案

【问题标题】：Laravel Mix BrowserSync reloadingLaravel Mix BrowserSync 重新加载
【发布时间】：2019-08-20 08:50:24
【问题描述】：

我正在使用带有 React 的 Laravel Mix。我已经配置了 BrowserSync 在 850 毫秒后重新加载 reloadDelay: 850 但有时 Webpack 编译我所有的 JS 文件需要超过 850 毫秒。我的页面在我的所有文件完成编译之前被重新加载，所以我每次都必须手动刷新我的页面。

除了reloadDelay 选项之外，是否有任何方法可以配置 Laravel Mix，使其仅在编译完成后重新加载？我不想进一步增加我的reloadDelay 值。

mix.react('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css')
    .browserSync({
     proxy: 'http://127.0.0.1:8000',
     reloadDelay: 850,
     files: [
        'resources/js/**/*.js'
     ]
});

【问题讨论】：

标签： javascript laravel webpack browser-sync laravel-mix

【解决方案1】：

我创建了一个适用于浏览器同步版本 2.26.7 的设置。我还发现文档的这一部分非常有用，browser sync recipes。您只需输入browser-sync recipe {recipe-name}。

即browser-sync recipe webpack.react-transform-hmr

假设您已在您的计算机上全局安装了 browser-sync。

mix.browserSync({
  watch: true,
  files: [
    'public/js/**/*',
    'public/css/**/*',
    'public/**/*.+(html|php)',
    'resources/views/**/*.php'
  ],
  open: "http://my-site.local/",
  browser: "google chrome",
  reloadDelay: 1000,
  proxy: {
    target: "http://my-site.local/",
    ws: true,
  },
});

下面有完整的代码 sn-p 关于我如何将我的 react 应用程序与 Laravel Nova 连接（我使用 Laravel Nova，所以我的文件路径看起来略有不同）

const mix = require('laravel-mix');
require('laravel-mix-imagemin');

// Copy and Convert images
mix.copy('resources/images', 'public/images')
   .imagemin('images/**/*');

// Compile and Copy css custom style files
mix.sass('resources/sass/form.scss', 'public/css')
   .minify('public/css/form.css');

mix.sass('resources/sass/main.scss', 'public/css')
   .minify('public/css/main.css');

mix.sass('resources/sass/nav.scss', 'public/css')
   .minify('public/css/nav.css');

// Copy css vendor files
mix.copy('resources/css/vendor/bootstrap-grid.min.css', 'public/css/vendor');

mix.copy('resources/css/vendor/normalize.css', 'public/css/vendor')
   .minify('public/css/vendor/normalize.css');

// Copy js vendor files
mix.copy('resources/js/vendor/modernizr-3.8.0.min.js', 'public/js/vendor');
mix.copy('resources/js/vendor/jquery-3.5.1.slim.min.js', 'public/js/vendor');
mix.copy('resources/js/vendor/jquery-3.4.1.min.js', 'public/js/vendor');

// Compile react
mix.react('resources/js/app.js', 'public/js')
   .sass('resources/sass/app.scss', 'public/css');

mix.browserSync({
  watch: true,
  files: [
    'public/js/**/*',
    'public/css/**/*',
    'public/**/*.+(html|php)',
    'resources/views/**/*.php'
  ],
  open: "http://my-site.local/",
  browser: "google chrome",
  reloadDelay: 1000,
  proxy: {
    target: "http://my-site.local/",
    ws: true,
  },
});

这将在http://localhost:3000 上打开您的浏览器，当您保存更改时，您的浏览器应该会重新加载。

注意！！当您在http://my-site.local/ 上打开浏览器选项卡时，我无法让实时重新加载工作，但是如果我打开http://my-site.local:3000，实时重新加载就像一个魅力。

快乐编码 =)

【讨论】：