What is wrong with gulpfile.js livereload not working on html change?

Question

gulp.js

I can not understand why livereload does not work when changing html files, but it works when changing less. What needs to be fixed to make it work. And in general, is it possible to somehow optimize my gulpfile?

var gulp = require('gulp');
var concatCss = require('gulp-concat-css');
var cleanCSS = require('gulp-clean-css');
var rename = require('gulp-rename');
var autoprefixer = require('gulp-autoprefixer');
var less = require('gulp-less');
var notify = require( 'gulp-notify' );
var livereload = require('gulp-livereload');


gulp.task('less', function () {
  return gulp.src('less/style.less')
    .pipe( less().on( 'error', notify.onError(
      {
        message: "<%= error.message %>",
        title  : "Sass Error!"
      } ) ))
    .pipe(rename('style-less.css'))
    .pipe(gulp.dest('css/'))
});
 
gulp.task('default', ['less'], function () {
  return gulp.src('css/*.css')
  	.pipe(autoprefixer({
      browsers: ['> 1%','last 3 versions'],
      cascade: false
    }))
    .pipe(concatCss('bundle.css')).on( 'error', notify.onError(
      {
        message: "<%= error.message %>",
        title  : "concatCSS Error!"
      } ) )
    .pipe(cleanCSS())
    .pipe(rename('bundle.min.css'))
    .pipe(gulp.dest('out/'))
    .pipe(livereload())
    .pipe(notify("Done"));
});

gulp.task('watch',function() {
  livereload.listen();
  gulp.watch('less/**/*.less', ['default']);
  gulp.watch('*.html',  ['default']);
  
});

Answer 1

Try to put .html files in a subfolder and specify the path to them, similar to the folder for .less files.
Or use gulp-connect or browser-sync .