Gulp w/Browsersync Boots but no page reload - gulp

Question

So I seem to have gulp working with browsersync. When I start gulp it opens my browser and gives me the following:
[13:01:41] Using gulpfile D:\Test\gulpfile.js
[13:01:41] Starting 'browser-sync'...
[13:01:41] Finished 'browser-sync' after 46 ms
[13:01:41] Starting 'default'...
[13:01:41] Finished 'default' after 12 µs
[BS] Access URLs:
-------------------------------------
Local: http://localhost:3000
External: http://10.127.127.1:3000
-------------------------------------
UI: http://localhost:3001
UI External: http://10.127.127.1:3001
-------------------------------------
[BS] Serving files from: ./
Here is my gulpfile
var gulp = require('gulp');
var browserSync = require('browser-sync').create();
// Static server
gulp.task('browser-sync', function() {
browserSync.init({
server: {
baseDir: "./"
}
});
});
gulp.task('default', ['browser-sync']);
I would it to just watch all the files in my project and reload when there is a change.

Answer 1

Try to modify your task (just add one line)
gulp.task('browser-sync', function() {
browserSync.init({
server: {
baseDir: "./"
}
});
gulp.watch("**/*").on('change', browserSync.reload); // add this line
});
or maybe you can try my gulp configuration https://github.com/infernalmaster/gulp-happy-starter (it has many code examples inside)

Answer 2

You can try making and array after browserSync.init :
browserSync.init([ "./assets/styles/**/*.css" , "./*.html" ],{
server: {
baseDir: "./"
}
});
Add your file paths in the array and after that just watch for changes:
gulp.watch("*.css").on("change", browserSync.reload));
gulp.watch("*.html").on("change", browserSync.reload));