Skip to content
laravel-mix 前端自动刷新的三种方法演示,Browsersync, HotModuleReplacement, LiveReload
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
app
bootstrap
config
database
public
resources
routes
storage
tests
.editorconfig
.env.example
.gitattributes
.gitignore
artisan
composer.json
composer.lock
package.json
phpunit.xml
readme.md
server.php
webpack.mix.bs.js
webpack.mix.hmr.js
webpack.mix.js
webpack.mix.livereload.js
yarn.lock

readme.md

laravel-mix-autoreload-demo

本项目展示了 laravel-mix 工作流中如何使用 Browsersync, Hot Module Replacement 以及 LiveReload 进行浏览器自动刷新。

建议配合博客《让 F5 歇一会儿——laravel-mix 自动刷新之道》一起查看

基本配置

首先你需要一个能运行 Laravel5.8 项目的环境,本人写此项目时使用 laradock,下面的步骤也是据此而写。可根据自己实际情况进行调整。

  1. 克隆项目到本地
git clone https://github.com/tianyong90/laravel-mix-autoreload-demo.git
  1. 安装依赖
// 后端,在 laradock workspace 容器里执行
composer install

// 前端,在宿主(本人为 windows19)中执行
yarn install
  1. 项目配置

因为本项目仅用于前端工作流展示,.evn 中除了 APP_KEY 之外无需其它配置

cp .env-example .env

php artisan key:generate
  1. 配置 nginx 站点

根据自己情况配置一个使用域名 laravel-mix-autoreload-demo.test 的站点,同时将它添加到 hosts 文件中。

查看示例效果

以下都在宿主(例如本人为 windows10)环境中执行。

Browsersync

  1. 进入项目根目录执行
yarn run demo:bs
  1. 首次编译完成后默认浏览器将自动打开页面

  2. 修改文件并保存,观察刷新效果

例如:

  • resources/js/ 目录下的全部 js 文件
  • resources/sass/ 目录下的全部 scss 文件
  • 后端控制器、模型文件等

Hot Module Replacement

  1. 进入项目根目录执行
yarn run demo:hmr
  1. 首次编译完成后在浏览器中打开 http://laravel-mix-autoreload-demo.test/demo-hmr

  2. 修改前端资源文件并保存,观察刷新效果

例如:

  • resources/sass/demo-hmr.scss
  • resources/js/demo-hmr.js
  • resources/js/comopnents/ExampleComponent.vue

LiveReload

  1. 进入项目根目录执行
yarn run demo:livereload
  1. 首次编译完成后在浏览器中打开 http://laravel-mix-autoreload-demo.test/demo-livereload

  2. 修改前端资源文件并保存,观察刷新效果

例如:

  • resources/sass/demo-livereload.scss
  • resources/js/demo-livereload.js
You can’t perform that action at this time.