Не могу настроить livereload в GULP?

Question

[Alexey]

Не могу настроить Gulp reload. Отображается листинг моих локальных файлов. Но не отображается index.html по умолчанию, только после клика по данному файлу, но livereload также не отображается...
При этом установлено расширение livereload, круг в середине заполнен.

Фрагмент кода gulpfile.js:

// 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 лежит в корневом каталоге, там же и gulpfile.js.
Подскажите как исправить данную ситуацию?