Browser-sync (under gulp) doesn't refresh browser

browser-sync, gulp, gulp-livereload, gulp-watch, javascript

Solution

I figured it out: browser-sync doesn't like implicit html tags, so this (although valid HTML5) will not work:

<!doctype html>
<title>implicit</title>

but this will:

<!doctype html>
<html>
    <head>  
        <title>full doc</title>
    </head>
    <body></body>
</html>

Problem

My config does everything it's supposed to, but it never refreshes the browser. Once I refresh it manually, changes are there. I am connecting to the default localhost:3000. Any ideas why is it so or how to debug it? gulpfile.js: ``` var gulp = require('gulp'); var sass = require('gulp-sass'); var sourcemaps = require('gulp-sourcemaps'); var browserSync = require('browser-sync'); gulp.task('html', function () { browserSync.reload(); }); gulp.task('sass', function() { return gulp.src('./app/scss/style.scss') .pipe(sass()) .pipe(gulp.dest('./app/css')) .pipe(browserSync.reload({ stream:true })); }); gulp.task('serve', function() { browserSync({ server: { baseDir: 'app' } }); }); gulp.task('default', ['serve'], function () { gulp.watch('./app/scss/*.scss', ['sass', browserSync.reload]); gulp.watch('./app/*.html', ['html', browserSync.reload]); }); ``` example of a console output: ``` [BS] Local URL: http://localhost:3000 [BS] External URL: http://192.168.1.3:3000 [BS] Serving files from: app [17:10:32] Starting 'html'... [BS] Reloading Browsers... [17:10:32] Finished 'html' after 829 μs [BS] Reloading Browsers... [17:10:42] Starting 'sass'... [BS] 1 file changed (style.css) [17:10:42] Finished 'sass' after 22 ms [BS] Reloading Browsers... [17:11:02] Starting 'html'... [BS] Reloading Browsers... [17:11:02] Finished 'html' after 472 μs [BS] Reloading Browsers... ```

Original source