11
Help us understand the problem. What are the problem?

More than 3 years have passed since last update.

posted at

Laravel-Mix, BrowserSyncで画面を自動リロードする方法

環境

バージョン
macOS High Sierra 10.13.5
Laravel 5.5
HostOS Ubuntu 18.04 LTS

前提

Laravelのプロジェクトを作成。
https://readouble.com/laravel/5.5/ja/homestead.html

Laravel-Mixの導入はこちらを参考にしてください
https://readouble.com/laravel/5.5/ja/mix.html#running-mix

Laravel-Mixとは

Laravel-Mix(前, Laravel Elixir)とはwebpackの設定を簡単に行えるAPI.

Laravel-Mixの導入

npm install で導入完了.

webpack.mix.jsの記述

webpack.mix.jsに色々書くと, アセットをどうコンパイルすべきか設定する.

webpack.mix.js
mix.browserSync({
    host: 'hoge.test',
    proxy: {
        target: "http://hoge.test",
        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
});

browserSyncとはファイルの変更を監視し、変更があればブラウザをリロードしてくれるツール.

変更の監視

npm run watch-pollにより変更を監視する.

console
       Local: http://localhost:3000
    External: http://hoge.test:3000

このようなものがターミナルに表示される
このURLをブラウザで表示すると, アプリケーションをブラウザから確認できる.
ファイルに変更を加えると, ブラウザに変更が反映される.

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Sign upLogin
11
Help us understand the problem. What are the problem?