javascript - 如何让 Laravel 5.3 应用程序在 SASS/JS 更改时自动重新加载

Question

每当我更改 SASS 或 Javascript 时，想要自动重新加载页面，但不知道如何在 laravel 5.3 中使用 WebPack 来做到这一点。我听说过热模块替换，但它看起来真的很复杂，有没有办法将它集成到我的 gulpfile 中。

Gulp 文件:

const elixir = require('laravel-elixir');

require('laravel-elixir-vue-2');

/*
 |--------------------------------------------------------------------------
 | Elixir Asset Management
 |--------------------------------------------------------------------------
 |
 | Elixir provides a clean, fluent API for defining some basic Gulp tasks
 | for your Laravel application. By default, we are compiling the Sass
 | file for your application as well as publishing vendor resources.
 |
 */

elixir((mix) => {
    mix.sass('app.scss')
       .webpack('app.js');
});

编辑(尝试过 BrowserSync 但未更新)

const elixir = require('laravel-elixir');

require('laravel-elixir-vue-2');
var BrowserSync = require('laravel-elixir-browsersync-official');

/*
 |--------------------------------------------------------------------------
 | Elixir Asset Management
 |--------------------------------------------------------------------------
 |
 | Elixir provides a clean, fluent API for defining some basic Gulp tasks
 | for your Laravel application. By default, we are compiling the Sass
 | file for your application as well as publishing vendor resources.
 |
 */

elixir((mix) => {
    mix.sass('app.scss')
       .webpack('app.js')
       .browserSync({
             port: 8000,
             proxy: 'localhost'
        });
});

Answer 1

您可以使用诸如browserSync之类的东西。

要安装browserSync，请运行:

npm install laravel-elixir-browsersync-official --save

然后在您的gulpfile中只需添加:

.browserSync({
    proxy: 'app.dev',
})

(将 app.dev 更改为您的实际应用网址)

然后，当您运行gulp watch时，浏览器应在检测到更改时自动重新加载。

希望这有帮助!