gulp - My browsersync server refreshes the page but with old content -

what want

i want setup gulp bundle files make changes source code , reload browser automatically.

i use browser-sync development server, browserify bundle javascript files , gulp task runner.

what's problem

it worked @ first, when save source file, browser reloaded, old code loaded , change not reflected. need refresh browser manually.

i blame factor-bundle browserify plugin, splits bundle 3 bundles - a, b , common (index.js, tests.js , app.js in case actual app code in app.js).

what have far

gulpfile.js [relevant code only]:

the critical code bundletypescript function

var gulp = require('gulp'); var browserify = require("browserify"); var source = require('vinyl-source-stream'); var buffer = require('vinyl-buffer'); var watchify = require("watchify"); var sourcemaps = require('gulp-sourcemaps'); var tsify = require("tsify"); var gutil = require("gulp-util"); var browsersync = require('browser-sync').create(); var merge = require('merge-stream');  var paths = {   entrypoint: "src/index.ts",   tests: "src/tests.ts",   distdir: "./dist/", };  var config = {   externalmodules: ['react', 'react-dom', 'react-router', 'react-bootstrap'] };   gulp.task('default', ['watch-typescript'], function () {   devserver(); });  function devserver() {   browsersync.init({     server: paths.distdir,   }); }   var bundler = browserify({   basedir: '.',   debug: true,   entries: [paths.entrypoint, paths.tests] }).plugin(tsify); //can replaced watchify in watch-typescript bundler.external(config.externalmodules);  gulp.task("watch-typescript", function () {   var watchedbrowserify = watchify(bundler);   watchedbrowserify.on("update", function () { return bundletypescript(true); });   watchedbrowserify.on("log", gutil.log);   bundler = watchedbrowserify; });  function bundletypescript(isdebug) {   var indexstream = source("index.js");   var teststream = source("tests.js");   bundler.plugin('factor-bundle', { outputs: [indexstream, teststream] });    var appstream = bundler.bundle()     .pipe(source('app.js'));     return merge(appstream, indexstream, teststream)     .pipe(buffer())     .pipe(sourcemaps.init({ debug: true, loadmaps: true }))     .pipe(sourcemaps.write("./"))     .pipe(gulp.dest(paths.distdir + 'scripts')) //output     .pipe(browsersync.stream()); //refresh browser } 

full gulp file can found here: https://jsfiddle.net/4ajba1nx/

why changes not reflected when browsersync reloads browser

i can see question posted days ago. anyways try answer in case still couldn't solve issue, or maybe can else facing similar problem.

i suspect problem coming line of code:

.pipe(browsersync.stream()); 

it put in wrong order of stream pipeline. happens browsersync receives , streams output of previous line gulp.dest().

i suggest move after line:

merge(appstream, indexstream, teststream) 

the result be:

merge(appstream, indexstream, teststream)   .pipe(browsersync.stream()) 

which means after 3 bundles merged result piped browsersync stream browser.

here can find boilerplate project combines gulp + browserfy + browsersync css inject: https://github.com/anass-b/gulp_browserfy_browsersync