Can't set up livereload in GULP?

Question

gulp.js

Can't set up Gulp reload. A listing of my local files is displayed. But index.html is not displayed by default, only after clicking on this file, but livereload is also not displayed...
At the same time, the livereload extension is installed, the circle in the middle is filled.
gulpfile.js code snippet:

// Livereload
    const livereload = require('gulp-livereload'),
    // Connect
    connect = require('gulp-connect');
   // ...

/**
 * Minifying SCSS -> CSS (with suffix .min.css)
 * @param src
 * @param dest
 * @returns {*}
 */
function minifyCss(src, dest) {
    return gulp.src(src)
        .pipe(sourcemaps.init())
        .pipe(sass({ style: 'expanded' }))
        .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
        .pipe(csso())
        .pipe(sourcemaps.write('.'))
        .pipe(rename({ suffix: '.min' }))
        .pipe(gulp.dest(dest))
        .pipe(connect.reload());
}

gulp.task('minifyStyles:main', function () {
    return minifyCss(mainStyles.mainSrc, mainStyles.mainDest);
});

gulp.task('connect', function() {
    connect.server({
        livereload: true,
        root: [__dirname],
    });
});

gulp.task('default', [
    'connect',
    'clean:main',
    'minifyStyles:main',
    'watchStyles:main'
]); // Default

Gulpfile is located in the root directory, gulpfile.js is also there.
Tell me how to fix this situation?