Browser-sync: Open same tab when running browserSync

[htmled]

Although this issue has to do with using Gulp.js, I believe this request should be logged under "browser-sync".

Whenever I stop gulp to update my config, then I restart gulp, a new browser tab opens, instead of the tab that was already open.

It would be great if you could make it so the same tab will reload whenever "gulp-browser-sync" runs.

[shakyShane]

I know this can be annoying but you can stop a new tab opening by using https://github.com/shakyShane/browser-sync/wiki/options#wiki-open

[smurfix]

But setting 'open' to False doesn't reload the original tab.
Might it be possible to have an option to auto-close the auto-opened tab(s) when I kill the server?
Or have an option for the client to try to reconnect, and reload the page when it's successful?

NB, for the record (and those who'll find this via Google): the option is now documented here:
http://www.browsersync.io/docs/options/#option-open

[shakyShane]

Or have an option for the client to try to reconnect, and reload the page when it's successful?

Yeah, that might be possible... I'm not sure that it should be default behaviour though... What specific need do you have for this?

[smurfix]

Hi,

Shane Osbourne:

Or have an option for the client to try to reconnect, and reload the page when it's successful?

Yeah, that might be possible... I'm not sure that it should be default behaviour though... What specific need do you have for this?

Often, when I develop and save partial files (or the first part of a change
that requires three files to actually work), node dies because the gulp
script that updates my files throws an error. So I have to restart it.

Or I need to add a path or filter, and restart it manually.

I'd like the browser state after that restart to be as seamlessly
up-to-date as it is after a successful auto-reload, which is so convenient
I've come to rely on it (and thank you for that ;-) . Forgetting to reload
the browser window thus happens all too often, and I run into strange
time-wasting bugs because the old client state doesn't match the new server's.

-- Matthias Urlichs

[shakyShane]

Sure - that makes sense.

I may add this into core, but if you wanted it now you easily create your own plugin like this. https://gist.github.com/shakyShane/3d5ec6685e07fd3227ba

NODE
You see here I register a new plugin before starting BrowserSync and then just start as normal

All of this javascript will get added at run time..

Boom, you have your feature request.

(also you could even publish it as a module to npm for us all to use) :)

[raptor235]

Was this added to core at all? I'm drowning in windows too... every time gulp dies because of a sass issue I have to restart gulp and so new windows are being created every time...

[shakyShane]

@raptor235 it wasn't I'm afraid - Either use open: false

or address your bigger issue here, which is that you should be handling your sass errors better (ie, not exiting the process).

[timthez]

For anyone out there who has had this issue, Ive made a bit of a different version of what @shakyShane made for a plugin.
https://gist.github.com/d1b29ea02cce7a2a59ff
Instead of reloading the tab if it exists, the plugin will close the page when it loses connection to the server. I prefer this as I like having my context switch to the browser when I restart the server but I don't want lots of old tabs from previous sessions.

[nirazul]

@timthez Your gist is not available, at least for me.

[timthez]

Thanks @Nirazul , the .git extension was breaking the link, I think it should work now.

[nirazul]

Thank you for the snippet, @timthez. It'll be surely of use to me :)

[andrewsuzuki]

For anyone out there using OS X and only developing on their browser, try downloading BetterTouchTool. I registered Cmd+Ctrl+R to execute the following commands only when inside my terminal (iTerm2):

1. Open chrome
2. Exec Cmd+R
3. Open terminal

Now when I hit Cmd+Ctrl+R it refreshes my disconnected window in an instant, without leaving the terminal.

[adamreisnz]

+1 for what it's worth. I think this would be a welcome feature for the core of BS.

My use case is that sometimes the tab just gets "overloaded" for lack of a better word, and that I have to restart the build/watch process manually. I do this via terminal, but that will open a new BS tab each time.

Ideally, I do think BS should know to "recycle" an existing TAB, if that one had been opened by a previous BS process. But I will look into the proposed plugins here.

Edit: the proposed snippets don't seem to work anymore, and I can't find usage of bs.use in the current API docs. Is this something that has been refactored recently in 2.x.x?

[danimalweb]

+1 for using the same tab.

[daslicht]

I have the same issue with the current version of BrowserSync , either I get no Refresh (open:false) or I get a new tab on each refresh when not using the system default browser (browser: "google chrome")

[linus-amg]

the discussion here inspired me to make a tiny little module for use with browser-sync https://www.npmjs.com/package/browser-sync-close-hook, check it out

[adamreisnz]

@elgubenis unfortunately, it doesn't seem to work for me with my implementation:

browserSync.use({
  plugin() {},
  hooks: {
    'client:js': autoClose
  }
});

I am not using gulp, but start BrowserSync directly:

/**
 * Initialize browser sync
 */
browserSync.init({
  port: PORT,
  server: {
    baseDir: BASE_DIR,
    middleware: [
      logMiddleware,
      staticMiddleware,
      spaMiddleware
    ]
  }
});

/**
 * Create a stream of file-change events
 */
Rx.Observable.create(observer => {
  let watcher = chokidar
    .watch([`${BASE_DIR}/**/*`], {ignoreInitial: true})
    .on('all', (event, file) => {
      observer.onNext({event, file});
    });
  return function() {
    watcher.close();
  };
})
  .debounce(1000)
  .filter(x => (x.event === 'add' || x.event === 'change'))
  .subscribe(x => {
    if (x.file.match(/\.css$/)) {
      browserSync.reload(x.file);
    }
    else {
      browserSync.reload();
    }
  });

Any thoughts?

[linus-amg]

could you check your browsers console output for any errors after you disconnected from bs?

[adamreisnz]

Yup, I get a Scripts may close only the windows that were opened by it.

[linus-amg]

I'd then recommend to set open to false in the browserSync options, and (on mac os x) cmd + leftclick on that colored link in your terminal: https://www.dropbox.com/s/k7chtx1a53tx3va/Screenshot%202016-03-28%2020.36.35.png?dl=0

edit: double left click it is, sorry!

[adamreisnz]

That doesn't help, still results in the same message in the console.

[linus-amg]

yeah about that .. its just so you don't need to close manually many times, with open: false you have to open manually (cmd + double leftclick on link in terminal) and like that no new windows open and its easy to open one almost-programatically

[adamreisnz]

Right, that's what you meant, ok. But still... What's the point of your
plugin then if it doesn't work? How did you get it to work? Are you using a
different browser?

On Wed, Mar 30, 2016, 09:51 Linus Gubenis [email protected] wrote:

yeah about that .. its just so you don't need to close manually many
times, with open: false you have to open manually (cmd + double leftclick
on link in terminal) and like that no new windows open and its easy to open
one almost-programatically

—
You are receiving this because you commented.
Reply to this email directly or view it on GitHub
https://github.com/BrowserSync/browser-sync/issues/84#issuecomment-203096419

[linus-amg]

there seems to be some weird circumstance under which it still works, yes, but later on i wasn't able to reproduce it anymore so I came up with the manual solution above

[zakdances]

The problem with closing the tab instead of re-using/reloading it (like how BS works on Safari) is that Developer Tools closes too. This is a problem if you need data from the Tools but also need BS paused.

[DrakeXiang]

I found that gulp-connect can reload server page without opening a new one, maybe browsersync could take a peek how they achieved this

[marcvangend]

Almost 5 years later, this would still be nice to have.

[adrian-wozniak]

@shakyShane Thanks for your gist!

I had a bit more tricky scenario: reload tab if exists (or tabs if more) otherwise open new one.

Plugin below worked for me:

    {
        plugin: (server, client) => {
            setTimeout(() => {
                const registeredConnections = Object.keys(client.io.sockets.sockets);
                if (registeredConnections.length === 0) {
                    client.setOption('open', 'local');
                    client.utils.openBrowser(client.options.getIn(['urls', 'local']), client.options, client);
                }
            }, 1000);
        },
        hooks: {
            'client:js': '' +
                '((window, bs) => {' +
                '    let canReload = false;' +
                '    bs.socket.on("connection", () => {' +
                '        if (canReload) {' +
                '            canReload = false;' +
                '            window.location.reload();' +
                '        }' +
                '    });' +
                '    bs.socket.on("disconnect", () => canReload = true);' +
                '})(window, ___browserSync___);'
        }
    }

[blachawk]

Any progress on this?