Почему не работает live reload?

Question

[MaximPatrushev]

Вот упрощенная версия моего файла с gulp конфигом:

const { src, dest, series, watch } = require('gulp');
const htmlmin = require('gulp-htmlmin');
const sass = require('gulp-sass');
const autoprefixer = require('gulp-autoprefixer');
const cleanCSS = require('gulp-clean-css');
const del = require('del');
const browserSync = require('browser-sync').create();

const clean = () => del(['dist']);

const html = () =>
  src('src/**/*.html')
  .pipe(htmlmin({ collapseWhitespace: true }))
  .pipe(dest('dist'))
  .pipe(browserSync.stream());

const css = () =>
  src('src/index.scss')
  .pipe(sass({
    includePaths: require('node-normalize-scss').includePaths
  }))
  .pipe(autoprefixer({
    cascade: false
  }))
  .pipe(cleanCSS({
    level: 2
  }))
  .pipe(dest('dist'))
  .pipe(browserSync.stream());

const start = () => {
  watch('./src/**/*.scss', css);
  watch('./src/**/*.html', html);
  build();
};

const build = series(clean, html, css);

exports.start = start;
exports.build = build;

Почему не работает live reload при изменении файлов? (приходится обновлять браузер в ручную)

Comments

[hellcaster]

Я в gulp 4 не разбирался, поэтому не могу точно сказать, но мне кажется, что в

watch('./src/**/*.scss', css);

gulp не знает что это за функция watch. В Gulp3 было gulp.watch

[MaximPatrushev]

muryn.official,
Функцию watch я определяю в этой строке.

const { src, dest, series, watch } = require('gulp');

Это идентично gulp.watch, просто определено с помощью ES6 деструктуризации.
Я сам с галпом давно не работал, решил освежить свои знания, но вот live reload никак не получается настроить. Помню, что раньше еще получалось через live edit в Webstorm и плагин для Хрома сделать по сути тоже самое, но и здесь нынче затык.

Answer 1

[Martovitskiy]

Попробуйте вывести reload в отдельную функцию.

function reload(done) {
  browsersync.reload();
  done();
}

Comments

[Martovitskiy]

Вот мой рабочий пример

const
  gulp          = require('gulp'),
  sass          = require('gulp-sass'),
  sourcemaps    = require('gulp-sourcemaps');
  browsersync   = require("browser-sync").create(),


function gulpSass() {
  return gulp
    .src('./scss/**/*.scss')
    .pipe(sourcemaps.init())
    .pipe(sass().on('error', sass.logError))
    .pipe(sourcemaps.write('./'))
    .pipe(gulp.dest('./css'))
    .pipe(browsersync.stream())
}


function browserSync(done) {
  browsersync.init({
    injectChanges: true,
    server: {
      baseDir: "./"
    },
    port: 3000,
    notify: false
  });
  done();
}


function watchFiles(done) {
  gulp.watch('./scss/**/*.scss', gulp.parallel(gulpSass));
  done();
}

const watch = gulp.parallel(watchFiles, browserSync);


exports.watch = watch;

function reload(done) {
  browsersync.reload();
  done();
}

[MaximPatrushev]

Martovitskiy, я забыл самую малость, инициализировать browserSync)

browsersync.init({
    injectChanges: true,
    server: {
      baseDir: "./"
    },
    port: 3000,
    notify: false
  });

Спасибо за помощь, все работает)