LoginSignup
18
21

More than 5 years have passed since last update.

LaravelMix + browserSyncでファイル編集時に自動リロードを行うための設定

Posted at

Laravelのドキュメントを見ながら設定を行ったが、
全然設定内容が足りなかったので、実際に動作した設定内容を記載します。

(参考)
https://readouble.com/laravel/5.4/ja/mix.html

■ドキュメントの内容

Laravelのドキュメントを見ると、以下の設定をするだけで自動リロードが出来るかのように記載されている。

// webpack.mix.js
mix.browserSync('my-domain.dev');

// もしくは

// https://browsersync.io/docs/options
mix.browserSync({
    proxy: 'my-domain.dev'
});

しかし、これだけ記載した上でnpm run watchもしくはnpm run watch-pollしてもそもそもファイルの編集自体読み取れていないようだった。

■設定内容

browserSyncのドキュメントを見ながら必要そうな設定内容足しました。
(参考)
https://www.browsersync.io/docs/options

mix.browserSync({
    host: 'homestead.app',
    proxy: {
        target: "http://homestead.app",
        ws: true
    },
    browser: "google chrome",
    files: [
       './**/*.css',
       './app/**/*',
       './config/**/*',
       './resources/views/**/*.blade.php',
       './resources/views/*.blade.php',
       './routes/**/*'
    ],
    watchOptions: {
      usePolling: true,
      interval: 100
    },
    open: "external",
    reloadOnRestart: true
});

この設定でnpm run watch-pollを実行すると、
こんな感じのメッセージが出てくる。

[BS] Proxying: http://homestead.app
[BS] Access URLs:
---------------------------------------
       Local: http://localhost:3000
    External: http://homestead.app/:3000
 ---------------------------------------
          UI: http://localhost:3001
 UI External: http://homestead.app:3001
 ---------------------------------------
[BS] Watching files...
[BS] Couldn't open browser (if you are using BrowserSync in a headless environment, you might want to set the open option to false)

最後の行でブラウザをひらけなかった、と言われているが、自動リロードはちゃんと動作しました。
最初にブラウザでページを開く作業だけ必要。
ページを開くときはhttp://homestead.app:3000でアクセスする必要があります。
ここをhttp://homestead.appでアクセスすると自動リロード出来なかった。

本当はポート番号なしでアクセスしても自動リロード出来て欲しいのですが、、、、
やり方が分かったら追記します。

以上。

18
21
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
18
21