Why won't browser-sync update my browser?

Question

Awe, why won't browser sync update chrome. =[ I'm using gulp to run browser sync which appears to be hosting correctly. I've set up the server like this in my gulp file:

var gulp = require('gulp');
var browser = require('browser-sync');
var reload = browser.reload;

gulp.task('webserver', function() {
    browser({
        server:{
            baseDir: './'
        }
    });
});

gulp.task('reload', function(){reload();});

I run the webserver task in webstorm and I get a new chrome tab with a little message saying "Connected to Browser Sync". Awesome. I also get this in the output window.

[18:47:45] Using gulpfile ...\gulpfile.js 
[18:47:45] Starting 'webserver'... 
[18:47:45] Finished 'webserver' after 27 ms
[BS] Access URLs:  
-------------------------------------
      Local: http://localhost:3000
   External: http://192.168.1.17:3000  
-------------------------------------
         UI: http://localhost:3001  
UI External: http://192.168.1.17:3001  
------------------------------------- 
[BS] Serving files from: ./

Everything looks great. Then I change some HTML in my index.html and run the reload task. I get this output:

[19:02:55] Using gulpfile ...\gulpfile.js
[19:02:55] Starting 'reload'...
[19:02:55] Finished 'reload' after 121 μs

Process finished with exit code 0

But the browser isn't updates with my latest content. I've tried to boil this down to the most basic code that should work, but I can't get it to update the browser. =[ Am I missing anything that would keep this from working?

Answer 1

TL;DR

I do believe your answer is how you are watching the files, and then calling load. So basically, if you are using sass or less, or typescript, etc. You need to have your browsersync task:

1. watch for those files first, then execute their task to transpile (compile) to your .css, .js, etc...
2. Once it detects the changes in the .css, .js, .html files (which will occur after they transpiler tasks converts them to those files), have it reload the browser.

But whether or not you are using those, you still watch all the folders locations and file extensions. This is done by putting all the locations you are watching into an array, and watching the array of files.

NOTE: Browsersync has a separate .watch() from gulp's watch. Using browsersyncs watch function instead of gulp will see new files, where as gulps watch command does not. See example's below.

I apologize for providing such a needlessly verbose response, but I use gulp-cli (gulp 4) w/ multiple task files and external config), and haven't used gulp 3 in a while, so I will try to port it over in a single task to gulp 3.

Some examples

I am providing both versions since gulp 4 may soon be released. And I will just copy and paste mine, and slightly modify it. And that means I will be using the multiple task files version.

So here is an overview of the two versions that I will provide:

1. The one I use, which is: gulp 4 w/ multiple task files and an external config
   • The gulpfile
   • The external task
   • The external config
     • I will also include an example sass and typescript config to show globbing with browser-sync's watch task
2. The gulpfile with the browser-sync task that I will try to port to gulp 3

1. Gulp 4 w/ multiple task files and external config

I will provide some notes in each file as I do in each of my own. And I will provide install instructions if interested, as I do in each of mine as well. This is mostly for copy and paste reasons. And also I will provide the config for sass and typescript, since it is out of scope for the answer, I will not be providing the task files.

And here is a brief overview of the gulp folder structure to help clarify:

| -- Project-Folder/
|    | -- gulp/
|    |    | -- tasks/
|    |    |    ' -- browser-sync.js
|    |    ' -- config.js
|    ' -- gulpfile.js

The gulpfile

gulpfile.js

// =========================================================
// Project: PROJECT-TITLE
//
// NOTES: Using Gulp 4, in order to use, please uninstall gulp 3 globally and locally, and install gulp 4 both globally and locally
// Dependencies: ---
// Global: npm install -g gulpjs/gulp.git#4.0 browser-sync
// Local: npm install --save-dev gulpjs/gulp.git#4.0 browser-sync gulp-load-plugins
// ========================================================= 
// ------------------------------------------------ Requires
var gulp        = require('gulp'),
    config      = require('./gulp/config'),
    plugins     = require('gulp-load-plugins')();

// --------------------function to get tasks from gulp/tasks
function getTask(task) {
    return require('./gulp/tasks/' + task)(gulp, plugins);
}
// ---------------------------------------------- Gulp Tasks
gulp.task('sass'        ,       getTask( 'sass'         ));
gulp.task('ts'          ,       getTask( 'typescript'   ));
gulp.task('sync'        ,       getTask( 'browsersync'  ));

// --------------------------------------- Default Gulp Task
gulp.task('default', gulp.series(
    gulp.parallel('sass', 'ts'), 'sync')
);

The external task file

browser-sync.js

// =========================================================
// Gulp Task: browsersync
// NOTE: Using gulp v4
// Description:  Sync sass, typescript, html, and browser
// using an external config, or modify src and config options
// npm install --save-dev browser-sync gulp-typescript gulpjs/gulp.git#4.0
// Options: node-sass gulp-sass || gulp-ruby-sass
// =========================================================
var config              = require( '../config.js' );
var browserSync         = require( 'browser-sync' ).create();

module.exports = function( gulp, plugins ) {
    return function () {
    var stream = 
// -------------------------------------------- Start Task
    browserSync.init( config.browsersync.opts );

    browserSync.watch( config.sass.src, gulp.series( 'sass' ) );
    browserSync.watch( config.typescript.src, gulp.series( 'ts' ) );
    browserSync.watch( config.browsersync.watch ).on( 'change', browserSync.reload );
// ---------------------------------------------- End Task
    return stream;
    };
};  

The external config

NOTE: These configs are easily added into the tasks file if this seems unnecessary. I am only providing so that I can easily copy and paste some tasks from my own project.

// =========================================================
// Project: PROJECT-TITLE
// =========================================================
// ------------------------------------------ Export Configs
module.exports = {
production: false,

// --------------------------------------------- browsersync
    browsersync: {
        opts: {
            server: './src/',
            // proxy: 'localhost:3000',
            port: 8000
        },
        watch: [
            './src/assets/styles/css/**/*.css',
            './src/assets/scripts/js/**/*.js',
            './src/**/*.html'
        ]
    },
// ---------------------------------------------------- sass
    sass: {
        src: [
            "./src/assets/styles/sass/**/*.{scss,sass}"
        ],
        opts: { },
        outputName: 'main.css',
        dest: './src/assets/styles/css/'
    },
// ---------------------------------------------- typescript
    typescript: {
        src: [
            './src/assets/scripts/ts/**/*.ts'
        ],
        dest: './src/assets/scripts/js',
        opts: {
            noImplicitAny: true, 
        }
    }
}

Gulp 3 version

NOTE: In the config section, I will only be putting the sass and typescript src folders with extensions, and will leave the rest empty as they are not pertinent to this example. gulpfile.js

// =========================================================
// Project: PROJECT-TITLE
//
// NOTES: Using Gulp 4, in order to use, please uninstall gulp 3 globally and locally, and install gulp 4 both globally and locally
// Dependencies: ---
// Global: npm install -g gulpjs/gulp.git#4.0 browser-sync
// Local: npm install --save-dev gulpjs/gulp.git#4.0 browser-sync gulp-load-plugins
// ========================================================= 
// ------------------------------------------------ Requires
var gulp        = require( 'gulp' ),
    sass        = require( 'gulp-sass' ),
    ts          = require( 'gulp-typescript' )
    browsersync = require( 'browser-sync' ).create();


// -------------------------------------------------- Config
var config = {
    browsersync = {
        opts: {
            server: './src/',
            // proxy: 'localhost:3000',
            port: 8000
        },
        watch: [
            './src/assets/styles/css/**/*.css',
            './src/assets/scripts/js/**/*.js',
            './src/**/*.html'
        ]
    },
    sass = { src: './src/assets/styles/sass/**/*.{scss,sass}', ... },
    ts   = { src: './src/assets/scripts/ts/**/*.ts', ... }
}

// ---------------------------------------------- Gulp Tasks
gulp.task( 'sass', function() {
    // task code here
});

gulp.task( 'ts', function() {
    // task code here
});

gulp.task('browsersync', [ 'sass', 'ts' ], function() {
    browserSync.init( config.browsersync.opts );

    // Transpile your preprocessors to their .css, .js, .html versions first
    browserSync.watch( config.sass.src, [ 'sass' ] );
    browserSync.watch( config.typescript.src, [ 'ts' ] );

    // Then under watch, watch all of the locations in an array glob
    // such as in the config object at the top of this file.
    // Once the preprocessors change to their .css, .js, .html  
    // counterparts, that will trigger the reload
    browserSync.watch( config.browsersync.watch ).on( 'change', browserSync.reload );
});

// --------------------------------------- Default Gulp Task
gulp.task( 'default', [ 'browsersync' ] );

Again, sorry for the very long and detailed response. Just tried for clarity. I hope it helps you and anyone else in the future.