Browsersync only refreshes the page once, how to fix?

Question

opencart

Good afternoon, dear experts, tell me what is my mistake.
1. CMS Open Cart 2.3.0.2 is installed on OpenServer 5.2.2
2. When editing files with the .tpl extension, browserSync only refreshes the page once, when saving. Please help me find the error, I will be grateful to you.
3. My gulpfile.js:

var syntax         = 'sass', 
    gulpVersion    = '4'; 
    gmWatch        = false;

var gulp          = require('gulp'),
    gutil         = require('gulp-util' ),
    sass          = require('gulp-sass'),
    browserSync   = require('browser-sync'),
    concat        = require('gulp-concat'),
    uglify        = require('gulp-uglify'),
    cleancss      = require('gulp-clean-css'),
    rename        = require('gulp-rename'),
    autoprefixer  = require('gulp-autoprefixer'),
    notify        = require('gulp-notify'),
    rsync         = require('gulp-rsync'),
    imageResize   = require('gulp-image-resize'),
    imagemin      = require('gulp-imagemin'),
    del           = require('del');

// Local Server
gulp.task('browser-sync', function () {
  browserSync({
    proxy: 'shop.loc', 
    notify: false
  });
});

// TPL Live Reload
gulp.task('code', function () {
  return gulp.src('magic/catalog/view/theme/puma/template/common/*.tpl')
    .pipe(browserSync.reload({ stream: true }))
});

// Sass|Scss Styles
gulp.task('styles', function() {
  return gulp.src('app/'+syntax+'/**/*.'+syntax+'')
  .pipe(sass({ outputStyle: 'expanded' }).on("error", notify.onError()))
  .pipe(rename({ suffix: '.min', prefix : '' }))
  .pipe(autoprefixer(['last 15 versions']))
  .pipe(cleancss( {level: { 1: { specialComments: 0 } } })) // Opt., comment out when debugging
  .pipe(gulp.dest('app/css'))
  .pipe(browserSync.stream())
});

// JS
gulp.task('scripts', function() {
  return gulp.src([
    'app/libs/jquery/dist/jquery.min.js',
    'app/js/common.js', // Always at the end
    ])
  .pipe(concat('scripts.min.js'))
  // .pipe(uglify()) // Mifify js (opt.)
  .pipe(gulp.dest('app/js'))
  .pipe(browserSync.reload({ stream: true }))
});

// Images @x1 & @x2 + Compression | Required graphicsmagick (sudo apt update; sudo apt install graphicsmagick)
gulp.task('img1x', function() {
  return gulp.src('app/img/_src/**/*.*')
  .pipe(imageResize({ width: '50%' }))
  .pipe(imagemin())
  .pipe(gulp.dest('app/img/@1x/'))
});
gulp.task('img2x', function() {
  return gulp.src('app/img/_src/**/*.*')
  .pipe(imageResize({ width: '100%' }))
  .pipe(imagemin())
  .pipe(gulp.dest('app/img/@2x/'))
});

// Clean @*x IMG's
gulp.task('cleanimg', function() {
  return del(['app/img/@*'], { force:true })
});

// If Gulp Version 3
if (gulpVersion == 3) {

  // Img Processing Task for Gulp 3
  gulp.task('img', ['img1x', 'img2x']);
  
  var taskArr = ['styles', 'scripts', 'browser-sync'];
  gmWatch && taskArr.unshift('img');

  gulp.task('watch', taskArr, function() {
    gulp.watch('app/'+syntax+'/**/*.'+syntax+'', ['styles']);
    gulp.watch(['libs/**/*.js', 'app/js/common.js'], ['scripts']);
    gulp.watch('app/*.html', ['code']);
    gmWatch && gulp.watch('app/img/_src/**/*', ['img']);
  });
  gulp.task('default', ['watch']);

};

// If Gulp Version 4
if (gulpVersion == 4) {

  // Img Processing Task for Gulp 4
  gulp.task('img', gulp.parallel('img1x', 'img2x'));

  gulp.task('watch', function() {
    gulp.watch('magic/catalog/view/theme/puma/template/**/*.tpl', gulp.parallel('code'));
  });
  gmWatch ? gulp.task('default', gulp.parallel('img', 'styles', 'scripts', 'browser-sync', 'watch')) 
          : gulp.task('default', gulp.parallel('styles', 'scripts', 'browser-sync', 'watch'));

};

Answer 1

Add a reload function

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

and call in watch

Answer 2

Hello, I have a similar problem, if you solved it, then please describe how you did it? Below is my Gulp file:

var syntax        = 'scss', // Syntax: sass or scss;
    gulpversion   = '4'; // Gulp version: 3 or 4

var gulp          = require('gulp'),
    gutil         = require('gulp-util' ),
    sass          = require('gulp-sass'),
    browserSync   = require('browser-sync'),
    concat        = require('gulp-concat'),
    uglify        = require('gulp-uglify'),
    cleancss      = require('gulp-clean-css'),
    rename        = require('gulp-rename'),
    autoprefixer  = require('gulp-autoprefixer'),
    notify        = require('gulp-notify'),
    rsync         = require('gulp-rsync');

gulp.task('browser-sync', function() {
  browserSync({
    proxy: "Gerani",
    notify: false
  });
});

gulp.task('styles', function() {
  return gulp.src('catalog/view/theme/Gerani/stylesheet/stylesheet.scss')
  .pipe(sass({ outputStyle: 'expanded' }).on("error", notify.onError()))
  .pipe(autoprefixer(['last 15 versions']))
  .pipe(cleancss( {level: { 1: { specialComments: 0 } } })) // Opt., comment out when debugging
  .pipe(gulp.dest('catalog/view/theme/Gerani/stylesheet'))
  .pipe(browserSync.stream())
});

gulp.task('reload',  function() {
    browserSync.reload();
});

if (gulpversion == 4) {
  gulp.task('watch', function() {
    gulp.watch('catalog/view/theme/Gerani/stylesheet/stylesheet.scss', gulp.parallel('styles'));
    gulp.watch('catalog/view/theme/Gerani/template/**/*.twig',  gulp.parallel('reload'))
    gulp.watch('catalog/view/theme/Gerani/js/**/*.js');
    gulp.watch('catalog/view/theme/Gerani/libs/**/*');
  });
  gulp.task('default', gulp.parallel('styles', 'browser-sync', 'watch' , 'reload'));
}