Как в этот gulpfile добавить livereload или browserSync?

Question

[Александр Осадчий]

Здравствуйте!

Помогите пожалуйста допилить gulpfile.js - пытаюсь сделать живую перезагрузку/компиляцию

Мне нужно, чтоб когда я в .scss / .php / .css / .js что-то поменял, сохранил CTRL+S - и после сохранения сработал gulp, пересобрал все, и обновил страницу в браузере - можно ли так сделать?

Мой 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

[Александр]

Добавьте следующее:

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

  done();
};

exports.server = server;

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

Скорее всего, browserSync.stream() с PHP сломается, и лучше использовать таску для этого, в которой будете вызывать browserSync.reload().