How to set up browsersync for wordpress?

Question

WordPress

Good afternoon.
I need gulp only for reloading pages and I will probably use scss in the future.

There is a sites directory where all my projects are located.
In the same directory in the gulp folder, I install gulp.


My idea is that when I need to switch to another project, I just change the path in the gulpfile.js file.
But I don’t understand what exactly needs to be written in browsersync, basedir or proxy.

let gulp = require('gulp'),
  // sass         = require('gulp-sass'),
  // autoprefixer = require('gulp-autoprefixer'),
  browserSync = require('browser-sync').create();


gulp.task('browser-sync', function () {
  browserSync.init({
    server: {
        baseDir: "../wc-estore/"
    },
    notify: true
    // proxy: 'localhost:8888/bober', //ссылка на локальный сайт
    // notify: true
  });
});

gulp.task('watch', function () {
  gulp.watch('../wc-estore/**/*.php').on("change", browserSync.reload); //Название папки вашей темы (your-theme)
  gulp.watch('../wc-estore/**/*.css').on("change", browserSync.reload); //Название папки вашей темы (your-theme)
  gulp.watch('../wc-estore/**/*.js').on("change", browserSync.reload); //Название папки вашей темы (your-theme)
});

gulp.task('default', gulp.parallel('watch', 'browser-sync'));

I work in a storm and I keep projects on hosting, and on the LAN there are only directories with themes and an empty wordpress project, so that the storm takes syntax and snippets from there.

Thanks in advance for your help.

Answer 1

I made this template for myself.
Created a gulp folder, it is on the same level with all projects.
I go into it and run the gulp command.
And now, when changing the php, scss, css, js files, the browser restarts with a delay of 2000ms.
The delay is necessary, since I work in a storm and need to push the changes to the server.
Here is the content of gulpfile.js

'use strict';

let gulp = require('gulp'),
  //css
  // stylus = require('gulp-stylus'),
  sass = require('gulp-sass'),
  autoprefixer = require("gulp-autoprefixer"),
  sourcemaps = require('gulp-sourcemaps'),
  wait = require('gulp-wait'),
  notify = require("gulp-notify"),
  plumber = require("gulp-plumber"),
  browserSync = require('browser-sync').create(),
  replace = require('gulp-replace');

let siteUrl = 'http://wc-estore.host1670806.hostland.pro/';
let siteDir = '../wc-estore/';

gulp.task("scss", function () {
  return gulp.src(siteDir + 'assets/scss/my.scss')
    // .pipe(plumber())
    .pipe(sourcemaps.init())
    .pipe(wait(500))
    .pipe(sass({
      outputStyle: 'expanded'
    }).on('error', notify.onError(function (error) {
      return 'An error occurred while compiling sass.\nLook in the console for details.\n' + error;
    })))
    .pipe(autoprefixer({
      cascade: false
    }))
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest(siteDir + 'assets/css/'))
    .pipe(browserSync.reload({stream: true}))
    .pipe(notify("Change css"));
});

gulp.task("watch", function () {
  gulp.watch(siteDir + 'assets/scss/**/*.scss', gulp.series('scss'));
});

gulp.task('browser-sync', function () {
  browserSync.init({
    proxy: {
      target: siteUrl,
      ws: true
    },
    reloadDelay: 2000
  });
  gulp.watch(siteDir + "**/*.php").on('change', browserSync.reload);
  gulp.watch(siteDir + "**/*.css").on('change', browserSync.reload);
  gulp.watch(siteDir + "**/*.js").on('change', browserSync.reload);
});

gulp.task('default', gulp.parallel('watch', 'browser-sync'));