Laravel 5.4 - Mix - 如何运行浏览器实时重新加载

Question

我在我的项目中使用 Laravel 5.4 并尝试使用 Mix 设置前端构建系统。一切正常，除了我无法获得浏览器自动重新加载选项。文档上没有任何关于它的内容。

请有人帮忙，我怎样才能做到这一点？

Answer 1

对于我接下来要做的项目：

1) 安装 chrome 浏览器扩展 Livereload https://chrome.google.com/webstore/detail/livereload/jnihajbhpnppcggbcgedagnkighmdlei

2) 全局安装 livereload（通过 CLI）：

npm install -g livereload

或在您的项目文件夹中本地（通过 CLI）：

npm install livereload

3) 将此 sn-p 放入您的 layout.blade.php 或其他模板中：

<script>
   document.write('<script src="http://' + (location.host || 'localhost').split(':')[0] +
        ':35729/livereload.js?snipver=1"></' + 'script>')
</script>

4) 在项目文件夹中运行 livereload（通过 CLI）：

livereload

5) 在 Chrome 浏览器中按下 livereload 按钮

就是这样！

Answer 2

如果有人需要另一种方法来使其工作，例如，如果在后端不使用 mix，我是这样解决的：

从项目根目录编辑 server.php 并替换 return false;:

if ($uri !== '/' && file_exists(__DIR__.'/public'.$uri)) {
    return false;
}

如下：

if ($uri !== '/' && file_exists(__DIR__.'/public'.$uri)) {

    // set log file for debugging purposes if needed
    #ini_set('error_log', __DIR__ . '/storage/logs/laravel.log');

    header("HTTP/1.1 301 Moved Permanently");
    header("Location: http://localhost:8080" . $uri);

    exit();
}

当然你需要同时启动artisan serve和npm run hot

Answer 3

重要更新！

忘记我之前说的吧，现在 laravel mix 已经更新，并且在功能和文档方面做了一些改进。

现在你可以简单了：

mix.browserSync('my-domain.dev');

// Or:

mix.browserSync({
    proxy: 'my-domain.dev'
})

然后npm run watch，你就可以开始了！

如果你想更新你的 webpack 版本，请将 package.json 上的版本更改为 *:

"laravel-mix": "*",

然后运行npm update laravel-mix。

请查看混合更新文档on github

重要更新结束

根据文档，您只需要在您的项目上运行 npm run hot 并在您的脚本或样式表参考中使用：

<link rel="stylesheet" href="{{ mix('css/app.css') }}">

所以mix() 函数会将您的资产网址指向http://localhost:8080/。

buuuuuuuut...这就是文档所说的，正如您所见here。我无法让它在运行 arch linux 的 laravel 全新安装上运行，一切都按原样编译，mix() 函数指向8080，但没有注入任何东西，我又回到了Ctrl+R 年龄。

希望你有更多的运气！

Answer 4

您仍然可以使用browser-sync。 Laravel 5.4 随 webpack 一起提供，并且有一个插件：browser-sync-webpack-plugin。

1. 安装browser-sync的东西：

   npm install --save-dev browser-sync browser-sync-webpack-plugin

2. 添加到webpack.mix.js：

const BrowserSyncPlugin = require('browser-sync-webpack-plugin');

mix.webpackConfig({
   plugins: [
       new BrowserSyncPlugin({
           files: [
               'app/**/*',
               'public/**/*',
               'resources/views/**/*',
               'routes/**/*'
           ]
       })
   ]
});

1. 在页面底部</body>之前添加这个sn-p：

   @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.6'><\/script>".replace("HOST", location.hostname));
       //]]>
   </script>
   @endif
   

2. 同时启动 Laravel 和 webpack-dev-server：

   php artisan serve & npm run watch

Answer 5

是的，我一直有同样的问题，我会说坚持使用 elixir，因为如果您查看 github，它完全是一团糟。从引导程序加载字体存在问题，组合方法流存在问题，甚至有太多问题无法详细介绍。它太新了，他们没有解决所有问题。

我的 2 美分是，如果您要升级到新的东西，至少要确保开箱即用的长生不老药有效。