Как правильно в Gulp 4 настроить browserSync reload html, js?

Question

[Martovitskiy]

Не получается настроить reload html и js. Где у меня ошибка?

const
  gulp          = require('gulp'),
  sass          = require('gulp-sass'),
  browsersync   = require("browser-sync").create(),
  concat        = require('gulp-concat'), 
  concatCSS     = require('gulp-concat-css'),
  uglify        = require('gulp-uglifyjs'), 
  cssnano       = require('gulp-cssnano'), 
  rename        = require('gulp-rename'),
  del           = require('del'),
  imagemin      = require('gulp-imagemin'),
  pngquant      = require('imagemin-pngquant'),
  cache         = require('gulp-cache'),
  autoprefixer  = require('gulp-autoprefixer'),
  htmlmin       = require('gulp-htmlmin'),
  gutil         = require( 'gulp-util' ),
  ftp           = require( 'vinyl-ftp' );

function gulpSass() {
  return gulp
    .src('assets/sass/**/*.sass')
    .pipe(sass({ outputStyle: "expanded" }))
    .pipe(autoprefixer(['last 15 versions', '> 1%', 'ie 8', 'ie 7'], {cascade: true}))
    .pipe(gulp.dest('assets/css'))
    .pipe(browsersync.stream())
}

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

function clean() {
  return del(["dist"]);
}

function clear() {
  return cache.clearAll();
}

function watchFiles(done) {
  gulp.watch('assets/sass/**/*.sass', gulp.parallel(gulpSass));
  gulp.watch('assets/css/**/*.css', browserSync.reload);
  gulp.watch("*.html", browserSync.reload);
  gulp.watch('assets/js/**/*.js', browserSync.reload);
  done();
}


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

exports.clean = clean;
exports.clear = clear;
exports.watch = watch;

Answer 1

[Martovitskiy]

Проблема решена добавлением отдельной функции перезагрузки

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

Comments

[leonid1979]

Спасибо, помог

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

Answer 2

[Константин Урумов]

Browser-sync надо иницилизировать в watch`e
const
gulp = require('gulp'),
sass = require('gulp-sass'),
browserSync = require('browser-sync').create(),
cleanCss = require('gulp-clean-css'),
autoprefixer = require('gulp-autoprefixer');

function styles(){
return gulp.src('./src/sass/**/*.sass')
.pipe(sass())
.pipe(autoprefixer({
browsers: ['last 5 versions'],
cascade: false
}))
.pipe(cleanCss({
level: 2
}))
.pipe(gulp.dest('./src/css'))
.pipe(browserSync.stream());
}

function watch(){
browserSync.init({
server: "./"
});
gulp.watch('./src/sass/**/*.sass', styles);
gulp.watch('./*.html').on('change', browserSync.reload);
}

gulp.task('watch', watch);

как-то так...

Comments

[Martovitskiy]

от этого ничего не изменится. Пробовал уже

[Константин Урумов]

А терминал что пишет?

[Martovitskiy]

Константин Урумов, в том то и дело, что ничего. Тупо reloader не срабатывает. А вот если пишу gulp.watch("*.html").on('change', browserSync.reload); тогда ловлю ошибку TypeError [ERR_INVALID_ARG_TYPE]: The "listener" argument must be of type Function. Received type undefinedned

[Константин Урумов]

Martovitskiy, я взял ваш gulpfile засунул в свой проект с версткой, закоментил все, что не использую в проекте, вырезал пару строк и все заработало...
скрин1
скрин2

[Martovitskiy]

Константин Урумов, ну попробовал и я. Оставил только один html

const
    gulp          = require('gulp'),
    browsersync   = require("browser-sync").create();
function browserSync(done) {
    browsersync.init({
        injectChanges: true,
        server: {
            baseDir: "./"
        },
        port: 3000,
        notify: false
    });
    done();
}

function watchFiles(done) {
    gulp.watch("*.html", browserSync.reload);
    done();
}
const watch = gulp.parallel(watchFiles, browserSync);
exports.watch = watch;

ничего не поменялось reload на html не срабатывает

[Константин Урумов]

Martovitskiy, Так и у меня не работает.

[Martovitskiy]

Константин Урумов, есть догадки что делаю не так?

[Константин Урумов]

Martovitskiy, я ни есть крупный специалист по gulp и js...
и мне не до конца понятен Ваш код, поэтому я его переписал по своему разумению(скрин2)

[Martovitskiy]

Константин Урумов, скрины не грузятся

[Константин Урумов]

[Martovitskiy]

Константин Урумов, решил проблему. Сделал отдельную функцию перезагрузки и всё заработало

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

[hellonigga]

помогло, спасибо!)