CODEWITHSUNDEEP
laravel-5.4browser-synclaravel-mix
llobet
llobet

Reputation: 2790

Laravel 5.4 watch blade files with browserSync

In laravel 5.4 mix and browserSync are coming by default. I want to get my browser refreshed with new changes if I modify any *.blade.php files from resources/views. In my webpack.mix.jsI have got this configuration:

const { mix } = require('laravel-mix');

mix
    .js('resources/assets/js/app.js', 'public/js')
    .sass('resources/assets/sass/app.scss', 'public/css')
    .browserSync({
        proxy:'localhost',
        port:8000,
        files: {
            match: [
                "resources/views/**/*.blade.php",
                "public/css/*.css",
                "public/js/*.js",
            ],
            fn: function (event, file) {
                /** Custom event handler **/
            },
            options: {
                ignored: [
                    '*.txt',
                    '*.json'
                ]
            }
        },
        logPrefix:'L54',
    });

I dont' know if I am doing right, or maybe I have to set up Mix configuration or so. Any help would be much appreciated.

Upvotes: 4

Views: 2815

Answers (3)

Davide Casiraghi
Davide Casiraghi

Reputation: 18087

The best setting I found to watch everything I'm working on in Laravel:

mix.browserSync({
    proxy: 'https://www.site.example',
    files: [
        './app/**/*',
        './routes/**/*',
        './public/css/*.css',
        './public/js/*.js',
        './resources/views/**/*.blade.php',
        './resources/lang/**/*',
    ]
})

Upvotes: 0

Sebastiaan Luca
Sebastiaan Luca

Reputation: 493

Just for anyone still wondering, this seems to work on Laravel 5.5 (development branch):

mix.browserSync({
    proxy: 'https://www.site.example',
    files: [
        './resources/views/**/*.blade.php',
    ]
})

Upvotes: 4

alepeino
alepeino

Reputation: 9761

But the assets in /public reload ok?

Anyway, I think you don't need to specify the files to watch, since those are the default. My config is just 

mix.browserSync({
  proxy: 'theapp.dev'
});

However if you do need to change that piece of the config (for the custom callback), the files option should be an array (that takes both strings and objects):

browserSync({
  files: [                           // 'files' array
    "wp-content/themes/**/*.css",      // 1st element
    {                                  // 2nd element
      match: ["wp-content/themes/**/*.php"],
      fn:    function (event, file) {
            /** Custom event handler **/
      }
    }                                  // end 2nd element
  ]                                  // end 'files' array
});

Upvotes: 2

Related Questions