How to setup browser-sync with Wordpress and xampp

Question

In my gulpfile.js I have the following code:

const themeName = "test"
const browsersync = require('browser-sync').create();

// Browsersync
function browserSyncServe(cb) {
  browsersync.init({
    proxy: `localhost/${themeName}/`,
    notify: {
      styles: {
        top: 'auto',
        bottom: '0',
      },
    },
  });
  cb();
}
function browserSyncReload(cb) {
  browsersync.reload();
  cb();
}

// Watch Task
function watchTask() {
  watch('*.html', browserSyncReload);
  watch('*.php', browserSyncReload);
  watch(
    ['src/scss/**/*.scss', 'src/**/*.js'],
    series(scssTask, jsTask, browserSyncReload)
  );
}

// Default Gulp Task
exports.default = series(
  browserSyncServe
);

It seems not so convinient to enter themeName for every single new project and match themeName with Wordpress theme folder name.

Is there any possibility to make it more automatic? I'm trying to set up browser-sync together with Wordpress website on xampp.

Any help would be much appreciated!

Answer 1

I'm by no means an expert on Browsersync, but I am a WP and xampp user who got it to work perfectly with the following config:

browserSync( {
    proxy: "https://localhost/mysite/",
    https: {
        key: "W:/xampp/htdocs/mkcert/localhost/localhost.key",
        cert: "W:/xampp/htdocs/mkcert/localhost/localhost.crt"
    }
});

NB: I am using xampp and it's installed on W:/ drive. I am also using mkcert for SSL.

You can learn more here .