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

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 时，浏览器应该会在检测到更改时自动重新加载。

希望这会有所帮助！