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

Laravel

使用 Laravel 5.4 和 Mix 实现浏览器的实时重新加载

在开发过程中，经常需要在修改代码后手动刷新浏览器来查看更改的效果。然而，这种方式不仅费时费力，还容易导致开发过程的不连续性。为了解决这个问题，Laravel 5.4 和 Mix 提供了一种简单的方式来实现浏览器的实时重新加载，让开发者能够更加高效地进行开发。

配置 Laravel Mix

首先，我们需要确保 Laravel Mix 已经正确配置。在 Laravel 5.4 中，Mix 已经默认集成在框架中，不需要额外安装。我们只需要在 Laravel 项目根目录下的 webpack.mix.JS 文件中进行配置。

在 webpack.mix.JS 文件中，我们可以定义一系列的任务来对资源文件进行编译和处理。为了实现浏览器的实时重新加载，我们需要在 webpack.mix.JS 文件中添加 browserSync 方法的调用。

Javascript
const mix = require('Laravel-mix');
mix.JS('resources/assets/JS/app.JS', 'public/JS')
    .sass('resources/assets/sass/app.sCSS', 'public/CSS')
    .browserSync('your-domAIn.test');

在上面的示例代码中，我们首先使用 JS 方法将 resources/assets/JS/app.JS 文件编译为 public/JS/app.JS。然后，使用 sass 方法将 resources/assets/sass/app.sCSS 文件编译为 public/CSS/app.CSS。最后，我们调用了 browserSync 方法，并将你的域名替换为你自己的域名。

安装 BrowserSync 依赖

为了让浏览器实时重新加载生效，我们还需要安装一些依赖。在终端中，进入到 Laravel 项目根目录，并执行以下命令来安装 BrowserSync 和相关的依赖：

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

安装完成后，我们可以执行 npm run watch 命令来启动 Laravel Mix 的监听任务。

实时重新加载

现在，当我们修改了资源文件（如 JavaScript 或 Sass 文件）后，Laravel Mix 将自动重新编译这些文件，并且浏览器会自动刷新以加载最新的修改。

在浏览器中打开你的 Laravel 应用，并进行一些修改。你会发现浏览器会实时更新，展示出你所做的修改。

通过使用 Laravel 5.4 和 Mix，我们可以轻松实现浏览器的实时重新加载。这种方式大大提高了开发的效率，让开发者能够更加专注于业务逻辑的实现，而不需要手动刷新浏览器来查看更改的效果。

案例代码：

Javascript
const mix = require('Laravel-mix');
mix.JS('resources/assets/JS/app.JS', 'public/JS')
    .sass('resources/assets/sass/app.sCSS', 'public/CSS')
    .browserSync('your-domAIn.test');

在上面的示例代码中，我们配置了 Mix 的任务，将 resources/assets/JS/app.JS 文件编译为 public/JS/app.JS，将 resources/assets/sass/app.sCSS 文件编译为 public/CSS/app.CSS。然后，我们调用了 browserSync 方法并传入你的域名。

执行 npm run watch 命令后，当你修改了资源文件后，浏览器会自动刷新以加载最新的修改。这样，你就可以更加高效地进行开发了。