Gulp w/Browsersync Boots but no page reload

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));