vercoutere's avatar

BrowserSync not refreshing

For some reason I can't get BrowserSync to refresh when I update my files. Upon running gulp watch the connection gets initialised so BrowserSync is installed and working. However it doesn't seem to pick up on any changes.

Here's my gulp file:

var gulp = require("gulp");
var shell = require('gulp-shell');
var elixir = require('laravel-elixir');
var themeInfo = require('./theme.json');

var task = elixir.Task;
elixir.extend("stylistPublish", function() {
    new task("stylistPublish", function() {
        return gulp.src("").pipe(shell("php ../../artisan stylist:publish " + themeInfo.name));
    }).watch("**/*.scss");
});

elixir(function (mix) {

    mix.sass([
        "app.scss"
    ], "assets/css/app.css")
    .stylistPublish()
    .browserSync({
        proxy: 'testing.dev'
    });
});

edit:

Probably worth mentioning, I'm running Elixir not in the default directory of Laravel but a custom theme folder, however I use the following elixir.json file:

{
  "srcDir": "Themes/MyTheme",
  "assetsDir": "resources/",
  "cssOutput": "assets/css/",
  "jsOutput": "assets/js/",
  "bowerDir": "resources/vendor/"
}
```
0 likes
14 replies
mikebronner's avatar

I stopped using browser synchs because of this. Would love to hear a solution. :) Haven't had the time to really dig into this issue.

bashy's avatar

Works for me using the default Elixir stuff by just adding this part right after mix.

.browserSync({
    proxy: 'testing.dev'
});
vercoutere's avatar

Well, it doesn't for me, that's kinda the problem... :p

whowe's avatar

I have the same situation for a few days until I figure out that it happens because I didn't close my html output properly.

</body>
</html>

BrowserSync needs to include some javascript text before to reload the browser. If the html body tag is not closed, BrowserSync has nowhere to include the script.

<script type='text/javascript' id="__bs_script__">//<![CDATA[
    document.write("<script async src='/browser-sync/browser-sync-client.2.10.1.js'><\/script>".replace("HOST", location.hostname));
//]]></script>

I just went to edit my master.blade.php(this depends on how you structure your view file) to close the html the proper way.

Hope it helps!

5 likes
bach's avatar

I also had the same problem. If there id an error in your SCSS file that is not caught by Elixir, this tends to happen. It happened to me a few days ago. I had purposely added spaces between parentheses so I can make stuff readable for me, and along the way, everything broke. I had to reverse engineer every step to pinpoint this.

This made everything fail: (notice the space in: url( space ... space)

.logo {
  background: url( #{$default-logo-path} ) no-repeat center;
  background-size: 100%;
  width: 300px;
  height: 150px;
  margin: 0 auto;
}

This works and Elixir and Browsersync don't fail silently (no spaces within the parentheses of url()):

(...)
  background: url(#{$default-logo-path}) no-repeat center;
(...)
Tjunafish's avatar

I fixed it using this:

mix.browserSync({
            proxy: 'myapp.dev',
            files: ['public/**/*.css', 'resources/**/*']
          });
10 likes
Shovels's avatar

Thanks @whowe wrapping the output in tags solved my issue!!

I also agree that you need to specify the list of files you want to watch, e.g...

if (mix.inProduction()) {

    // disable notifications
    mix.disableNotifications();

    // version all the assets
    mix.version();

} else {

    mix.browserSync({
        files: [
            'app/**/*',
            'public/**/*',
            'resources/views/**/*',
            'resources/lang/**/*',
            'routes/**/*'
        ],
        proxy: 'my-domain.dev',
        notify: false,
        open: false
    });

}

Ohh... and to run using the new version of Mix...

npm run watch
giovannipds's avatar

Thanks, I've needed to specify the files too, somehow after adding .extract my sass files stopped live reloading.

1 like
hutch's avatar

@Shovels @giovannipds thank you both - i recently added extract and my auto reload stopped working as well out of nowhere. I was not specifying the files to watch because i did not have to previously. That changed when I added extract as you mentioned...

In case this helps anyone else, I also had to move the .browsersync reference to the bottom of my webpack.mix.js chain , where it was previously at the top !

Good luck guys. Browsersync stuff can be pretty frustrating.

Please or to participate in this conversation.