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

Question

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

有人请帮忙,我该怎么做？

Answer 1

重要更新!

忘记我之前说的话,现在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.

请检查github上的mix更新文档

重要更新结束

根据您需要npm run hot在项目上运行的文档以及脚本或样式表参考使用:

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

所以该mix()函数会将您的资源url指向http://localhost:8080/.

buuuuuuuut ...这正是文档所说的,你可以在这里看到.我不能让它在运行arch linux的laravel全新安装上工作,一切都按照它应该编译并且mix()函数指向8080但没有注入,我回到了Ctrl+R年龄.

希望你有更多的运气!

Answer 2

你还可以用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/**/*'
           ]
       })
   ]
});

3. 在此之前的页面底部添加此代码段</body>:

   @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
   

4. 启动两个,Laravel和webpack-dev-server:

   php artisan serve & npm run watch

Answer 3

是的,我一直有同样的问题,我会说坚持elixir,因为如果你看看github它是一个完整的混乱.从引导程序加载字体,组合方法流的问题,甚至是详细的问题都有很多问题.这太新了,他们没有解决所有问题.

我的2美分就是如果你要升级到新的东西,至少要确保灵丹妙药上的任何东西都在混合上.

Answer 4

对于我的项目,我接下来做:

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

2)全局安装livereload(通过CLI):

npm install -g livereload

或在项目文件夹中本地(通过CLI):

npm install livereload

3)将此片段放在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按钮

而已!