Gulp livereload doesn't work with gulp-connect using watch

Question

I'm using gulp-connect plugin for my development server and also I've installed gulp-livereload. Then I made the following tasks:

var gulp = require('gulp'),
    connect = require('gulp-connect'),
    livereload = require('gulp-livereload');


gulp.task('serve', function() {
  connect.server({
    root: 'app',
    livereload: true
  });
});

gulp.task('css', function() {
  gulp.src('./app/stylesheets/*.css')
    .pipe(connect.reload());
});

gulp.task('html', function() {
  gulp.src('./app/index.html')
    .pipe(connect.reload());
});

gulp.task('watch', function() {
  gulp.watch('./app/stylesheets/*.css', ['css']);
  gulp.watch('./app/index.html', ['html']);
});

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

But whenever I run the server and make any changes to stylesheets or index.html I still need to refresh the page manually, though I've made everything according to their docs. I've tried also to write the default task like this:

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

but it didn't help either. What is the problem with livereload?

ADDED: When I check the console, it says that it cannot connect to ws://localhost:35729/livereload. Also when I refresh the page, console says that connection with ws://localhost:35729/livereload was interrupted. Does that mean that livereload cannot establish proper connection?

EDIT: Though I've done nothing, now livereload does refresh the page automatically, when I change my .css file. But it still doesn't refresh when I change index.html.

Answer 1

My very, very bad -- I've just now noticed, that in my original code I had

// ...
  gulp.watch('./app/html', ['html']);

instead of line from above. As soon as I fixed it, everything worked!