本项目展示了 laravel-mix 工作流中如何使用 Browsersync
, Hot Module Replacement
以及 LiveReload
进行浏览器自动刷新。
建议配合博客《让 F5 歇一会儿——laravel-mix 自动刷新之道》一起查看
首先你需要一个能运行 Laravel5.8 项目的环境,本人写此项目时使用 laradock
,下面的步骤也是据此而写。可根据自己实际情况进行调整。
- 克隆项目到本地
git clone https://github.com/tianyong90/laravel-mix-autoreload-demo.git
- 安装依赖
// 后端,在 laradock workspace 容器里执行
composer install
// 前端,在宿主(本人为 windows19)中执行
yarn install
- 项目配置
因为本项目仅用于前端工作流展示,.evn 中除了 APP_KEY 之外无需其它配置
cp .env-example .env
php artisan key:generate
- 配置 nginx 站点
根据自己情况配置一个使用域名 laravel-mix-autoreload-demo.test 的站点,同时将它添加到 hosts 文件中。
以下都在宿主(例如本人为 windows10)环境中执行。
- 进入项目根目录执行
yarn run demo:bs
-
首次编译完成后默认浏览器将自动打开页面
-
修改文件并保存,观察刷新效果
例如:
- resources/js/ 目录下的全部 js 文件
- resources/sass/ 目录下的全部 scss 文件
- 后端控制器、模型文件等
- 进入项目根目录执行
yarn run demo:hmr
-
首次编译完成后在浏览器中打开 http://laravel-mix-autoreload-demo.test/demo-hmr
-
修改前端资源文件并保存,观察刷新效果
例如:
- resources/sass/demo-hmr.scss
- resources/js/demo-hmr.js
- resources/js/comopnents/ExampleComponent.vue
- 进入项目根目录执行
yarn run demo:livereload
-
首次编译完成后在浏览器中打开 http://laravel-mix-autoreload-demo.test/demo-livereload
-
修改前端资源文件并保存,观察刷新效果
例如:
- resources/sass/demo-livereload.scss
- resources/js/demo-livereload.js