8

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...
rdkn
  • 566
  • 7
  • 14
  • Even i faced a similar problem when i was new to browser-sync usage,the commandline was saying "reloading browsers" but the browser was not refreshed at all, the problem was i had not included body tag in my html page where the browser-sync can inject script for its functionality,make sure your html page has body tag. – SU15 May 22 '17 at 10:02

1 Answers1

16

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>
rdkn
  • 566
  • 7
  • 14
  • 5
    actually it just needs body tag (and it's documented behavior) – rdkn Dec 04 '14 at 10:17
  • This was the answer I was looking for. However I can't seem to find this in BrowserSync's documentation. Or is this a Gulp thing? – jremydeaton Jan 09 '15 at 00:09
  • 1
    Should be in the main docs, but it's mentioned here https://github.com/shakyShane/browser-sync#requirements – shane Jan 13 '15 at 20:41