[SOLVED] Is there a way, in Node or Gulp, to reload the browser with a specific URL?

Is there a way, in Node or Gulp, to reload the browser with a specific URL?

Apologies in advance if this is not the right place to ask.

Due to the way my workplace/CMS is set up I do not have access to a local version of the site to develop on. Instead, we are devloping CSS and JS locally (compiling with Node and Gulp) and using a Chrome extension to use those local .css and .js files on the live site. Whilst this is not ideal, it is working.

I want to incorporate automatic browser refreshing into this. I've looked into Browser-Sync but as per their documentation:

Browsersync works by injecting an asynchronous script tag (<script async>...</script>) right after the tag

So that's not an option (assuming the file it injects into has to be local and writable).

I've also looked at Live Reload BP but that seems to work the same way.

Does anyone know of a way to have Node or Gulp reload the browser given a specific third-party URL?

What I want to achieve is something like:

gulp.task('watch', ['browserSync', 'sass'], function (){
  gulp.watch('app/scss/**/*.scss', ['sass']); 
});

gulp.task('browserSync', function() {
   reload: 'https://somesite.com/test';
})

Solution

This can be done by simply spawning a browser process, for example on Windows:

gulp.task('browserSync', function(done) {
   const { exec } = require('child_process');
   exec('start Chrome https://somesite.com/test', done); // Use Chrome on Windows
});

For cross-os and cross-browser compatibility, there are third party utilities like open.

Install the dependency:

npm i -D open

Then use it in your task:

gulp.task('browserSync', async function() {
    const open = require('open');
    await open('https://somesite.com/test'); // Use default browser
});