Why isn't browserSync working?

Question

JavaScript

After entering the gulp command into the console, everything starts up normally, transfers to localhost: 3000, but nothing appears on the page further ..
Please tell me how to solve the problem, I will be extremely grateful
gulpfile code:

var gulp           = require('gulp'),
    gutil          = require('gulp-util' ),
    sass           = require('gulp-sass'),
    browserSync    = require('browser-sync'),
    cleanCSS       = require('gulp-clean-css'),
    autoprefixer   = require('gulp-autoprefixer'),
    bourbon        = require('node-bourbon'),
    ftp            = require('vinyl-ftp');

// Обновление страниц сайта на локальном сервере
gulp.task('browser-sync', function() {
  browserSync({
    proxy: "opencartshop",
    notify: false
  });
});

// Компиляция stylesheet.css
gulp.task('sass', function() {
  return gulp.src('catalog/view/theme/apple/stylesheet/stylesheet.sass')
    .pipe(sass({
      includePaths: bourbon.includePaths
    }).on('error', sass.logError))
    .pipe(autoprefixer(['last 15 versions']))
    .pipe(cleanCSS())
    .pipe(gulp.dest('catalog/view/theme/apple/stylesheet/'))
    .pipe(browserSync.reload({stream: true}))
});

// Наблюдение за файлами
gulp.task('watch', ['sass', 'browser-sync'], function() {
  gulp.watch('catalog/view/theme/apple/stylesheet/stylesheet.sass', ['sass']);
  gulp.watch('catalog/view/theme/apple/template/**/*.tpl', browserSync.reload);
  gulp.watch('catalog/view/theme/apple/js/**/*.js', browserSync.reload);
  gulp.watch('catalog/view/theme/apple/libs/**/*', browserSync.reload);
});

// Выгрузка изменений на хостинг
gulp.task('deploy', function() {
  var conn = ftp.create({
    host:      'hostname.com',
    user:      'username',
    password:  'userpassword',
    parallel:  10,
    log: gutil.log
  });
  var globs = [
  'catalog/view/theme/apple/**'
  ];
  return gulp.src(globs, {buffer: false})
  .pipe(conn.dest('/path/to/folder/on/server'));
});

gulp.task('default', ['watch']);

Answer 1

I do not use OpenServer, so I propose a universal solution:
change the following code snippets

gulp.task('browser-sync', function() {
  browserSync.init()
});

run the task and copy the snippet that will be offered to us in the console

<script id="__bs_script__">//<![CDATA[
    document.write("<script async src='http://HOST:3000/browser-sync/browser-sync-client.js?v=2.23.6'><\/script>".replace("HOST", location.hostname));
//]]></script>

find the footer.twig file along the path catalog\view\theme\default\template\common and copy it to your theme folder
open this file and paste the copied snippet before the closing tag </body>
activate the theme in the opencart admin panel
you also need to copy the header.twig file and change the path to the stylesheet.css file Offtopic
: I think it makes sense to buy this course and get advice from the author himself. Most likely, he will not update the information, and progress does not stand still.