Gulp+browsersync not updating html?

Question

Node.js

var gulp      = require('gulp'), 
    sass        = require('gulp-sass'), 
    browserSync = require('browser-sync'), 
    jade = require('gulp-jade');


gulp.task('sass', function(){ 
    return gulp.src('app/sass/**/*.sass') 
        .pipe(sass()) 
        .pipe(gulp.dest('app/css')) 
        .pipe(browserSync.reload({stream: true})) 
});

gulp.task('browser-sync', function() {
    browserSync({ 
        server: { 
            baseDir: 'app'
        },
        notify: false 
    });
});



gulp.task('jade', function(){
    return gulp.src('app/jade/**/*.jade')
    .pipe(jade())
    .pipe(gulp.dest('app'))
});

gulp.task('watch', ['browser-sync', 'sass','jade'], function() {
    gulp.watch('app/sass/**/*.sass', ['sass']);
    gulp.watch('app/jade/**/*.jade', ['jade']); 
    gulp.watch('app/*.html', browserSync.reload); 
   
});

Knowledgeable people please look at the code and tell me why it doesn’t update for me? If you remove Jade, then everything works ..

Answer 1

gulp.watch('app/*.html', browserSync.reload);
replaced by

gulp.watch('app/*.html').on('change', browserSync.reload);

Answer 2

And why did you register sass in the task .pipe(browserSync.reload({stream: true})), but not jade in the task?

Answer 3

Here is the error, why did you put a semicolon after browser-sync

browserSync = require('browser-sync'); 
jade = require('gulp-jade');

It should be like this:

var gulp = require('gulp'),
  sass = require('gulp-sass'),
  jade = require('gulp-jade'),
  browserSync = require('browser-sync'),
  reload = browserSync.reload;


gulp.task('sass', function() {
  return gulp.src('app/sass/**/*.sass')
    .pipe(sass())
    .pipe(gulp.dest('app/css'))
    .pipe(reload({
      stream: true
    }));
});

gulp.task('browser-sync', function() {
  browserSync({
    server: {
      baseDir: 'app'
    },
    notify: false
  });
});

gulp.task('jade', function() {
  return gulp.src('app/jade/**/*.jade')
    .pipe(jade())
    .pipe(gulp.dest('app'))
    .pipe(reload({
      stream: true
    }));
});

gulp.task('watch', ['browser-sync', 'sass', 'jade'], function() {
  gulp.watch('app/sass/**/*.sass', ['sass']);
  gulp.watch('app/jade/**/*.jade', ['jade']);
  gulp.watch('app/*.html', browserSync.reload);

});