実現したいこと
編集・保存してからnpm run devしてページを読み込む作業がめんどくさいので、保存後、自動でブラウザのリロードまで実施されるようにします。
環境
・laravel7.x
・macOS
・MAMP
方法
webpack.mixを編集
const mix = require('laravel-mix');
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel application. By default, we are compiling the Sass
| file for the application as well as bundling up all the JS files.
|
*/
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/style.scss', 'public/css')
.browserSync({
files: [
"resources/**/*",
"config/**/*",
"routes/**/*",
"app/**/*",
"public/**/*"
],
proxy: {
target: "http://127.0.0.1:8000",
},
open: false, //起動時にブラウザを開かない
reloadOnRestart: true //起動時にブラウザにリロード命令おくる
});
1つめのターミナルでphp artisan serve
ターミナルでサーバーを立ち上げます。
$ php artisan serve
Laravel development server started: http://127.0.0.1:8000
[Wed Oct 21 22:10:09 2020] PHP 7.4.7 Development Server (http://127.0.0.1:8000) started
2つめのターミナルでnpm run watch
別のターミナル画面でnpm run watch を入力します。
$ npm run watch
> @ watch /Applications/MAMP/htdocs/laravel_sample
> npm run development -- --watch
> @ development /Applications/MAMP/htdocs/laravel_sample
> cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js "--watch"
10% building 1/1 modules 0 active
webpack is watching the files…
98% after emitting SizeLimitsPlugin
DONE Compiled successfully in 3851ms 22:10:54
Asset Size Chunks Chunk Names
/css/style.css 23.1 KiB /js/app [emitted] /js/app
/js/app.js 2.7 MiB /js/app [emitted] /js/app
[Browsersync] Proxying: http://127.0.0.1:8000
[Browsersync] Access URLs:
----------------------------------------
Local: http://localhost:3000
External: http://192.168.100.105:3000
----------------------------------------
UI: http://localhost:3001
UI External: http://localhost:3001
----------------------------------------
[Browsersync] Watching files...
ブラウザ画面でhttp://localhost:3000を開いた時に右上にBrowsersync:connectedという表記が出てきたら成功です。
最後に
どんどん自動化していくと楽になりますよね。
今回のものはかなり簡単に導入できるので、是非試してみてください！