HTML Reloading using BrowserSync in Gulp - gulp

Question

I've tried several different things in my gulpfile.js to get HTML automatic reloading to work with BrowserSync (not LiveReload) in Gulp, but none have worked. I thought this last try would do the trick but it isn't working, either. What am I missing?
Here's my entire gulpfile.js:
// -------------------------------------------------------------------------
// GET THINGS SET UP
// -------------------------------------------------------------------------
// Include Gulp
var gulp = require('gulp');
// CSS plugins
var sass = require('gulp-sass');
var combineMediaQueries = require('gulp-combine-media-queries');
var autoprefixer = require('gulp-autoprefixer');
var cssmin = require('gulp-cssmin');
// JS plugins
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
// Image plugins
var imagemin = require('gulp-imagemin');
var svgmin = require('gulp-svgmin');
// General plugins
var browserSync = require('browser-sync');
var reload = browserSync.reload;
var notify = require('gulp-notify');
// -------------------------------------------------------------------------
// TASKS
// -------------------------------------------------------------------------
// CSS tasks
gulp.task('css', function() {
return gulp.src('src/scss/**/*')
// Compile Sass
.pipe(sass({ style: 'compressed', noCache: true }))
// Combine media queries
.pipe(combineMediaQueries())
// parse CSS and add vendor-prefixed CSS properties
.pipe(autoprefixer())
// Minify CSS
.pipe(cssmin())
// Where to store the finalized CSS
.pipe(gulp.dest('build/css'))
// Notify us that the task was completed
.pipe(notify({ message: 'CSS task complete' }));
});
// JS tasks
gulp.task('js', function() {
return gulp.src('src/js/**/*')
// Concatenate all JS files into one
.pipe(concat('production.js'))
// Minify JS
.pipe(uglify())
// Where to store the finalized JS
.pipe(gulp.dest('build/js'))
// Notify us that the task was completed
.pipe(notify({ message: 'Javascript task complete' }));
});
// Image tasks
gulp.task('images', function() {
return gulp.src('src/images/raster/*')
// Minify the images
.pipe(imagemin())
// Where to store the finalized images
.pipe(gulp.dest('build/images'))
// Notify us that the task was completed
.pipe(notify({ message: 'Image task complete' }));
});
// SVG tasks
gulp.task('svgs', function() {
return gulp.src('src/images/vector/*')
// Minify the SVG's
.pipe(svgmin())
// Where to store the finalized SVG's
.pipe(gulp.dest('build/images'))
// Notify us that the task was completed
.pipe(notify({ message: 'SVG task complete' }));
});
// Watch files for changes
gulp.task('watch', ['browser-sync'], function() {
// Watch HTML files
gulp.watch('build/*.html', reload);
// Watch Sass files
gulp.watch('src/scss/**/*', ['css']);
// Watch JS files
gulp.watch('src/js/**/*', ['js']);
// Watch image files
gulp.watch('src/images/raster/*', ['images']);
// Watch SVG files
gulp.watch('src/images/vector/*', ['svgs']);
});
gulp.task('browser-sync', function() {
browserSync.init(['build/css/*', 'build/js/*'], {
server: {
baseDir: "build"
}
});
});
// Default task
gulp.task('default', ['css', 'js', 'images', 'svgs', 'watch', 'browser-sync']);

Answer 1

I had the exact same problem.
The problem was that my jade (html) task did not finish before my browsersync task.
So I made the browsersync task wait for all tasks that had to finish first
Apparently thats why Browser-Sync was not aware of the file, this fixed it:
gulp.task('browsersync', ['jade', 'stylus', 'browserify'], function() {
browserSync.init(['./public/**/**.**'], {
port: 8080,
server: {
baseDir: "./public"
}
});
});

Answer 2

gulp.task('browser-sync', function() {
browserSync.init(['./build/css/**.*', './build/js/**.*'], {
server: {
baseDir: "./build"
}
});
});
These minor changes in the code above, should fix your problem...