How to add livereload or browserSync to this gulpfile?

Question

WordPress

Hello!

Please help me finish gulpfile.js - I'm trying to do a live reload/

compile and refreshed the page in the browser - is it possible to do this?

My gulpfile.js

/* eslint-disable camelcase */
const {
  dest,
  parallel,
  series,
  src
} = require('gulp'),
  concat = require('gulp-concat'),
  rename = require('gulp-rename'),
  sass = require('gulp-sass'),
  browserSync = require('browser-sync').create(),
  cleanCSS = require('gulp-clean-css');

const Wlax = {
  scss: './wp-content/themes/munich/assets/scss/*.scss',
  aljs: [
    './wp-content/themes/munich/js/*.js'
  ],
  pub: './wp-content/themes/munich/dist/',
  css: './wp-content/themes/munich/dist',
  newcss: './wp-content/themes/munich/css/',
  allcss: './wp-content/themes/munich/css/*.css',
  js: './wp-content/themes/munich/dist'
}

const css = () => src(Wlax.scss).
  pipe(sass({ outputStyle: 'compressed' }).on('error', sass.logError)).
  pipe(dest(Wlax.newcss)).
  pipe(browserSync.stream());

const allcss = () => src(Wlax.allcss).
  pipe(concat('min')).
  pipe(cleanCSS({compatibility: 'ie8'})).
  pipe(rename('styles-all.min.css')).
  pipe(dest(Wlax.css)).
  pipe(browserSync.stream());

exports.styles = css;
exports.mstyles = allcss;

exports.build = series(parallel(css, allcss));
exports.default = series(parallel(css, allcss));

Answer 1

Add the following:

const server = done => {
  browserSync.init({
    server: {
      baseDir: 'path to server root'
    },
    notify: false
  });

  done();
};

exports.server = server;

exports.default = series(server, parallel(css, allcss));

Most likely it browserSync.stream()will break with PHP, and it is better to use a task for this, in which you will call browserSync.reload().