Что я хочу

Я хочу настроить gulp для объединения моих файлов, когда я вношу изменения в исходный код и автоматически перезагружаю браузер.

Я использую browser-sync в качестве сервера разработки, browserify для объединения файлов javascript и gulp в качестве средства выполнения задач.

В чем проблема

Сначала это работало, но теперь, когда я сохраняю исходный файл, браузер перезагружается, но загружается старый код и изменение не отражается. Мне нужно обновить браузер вручную.

Я обвиняю плагин просмотра factor-bundle, который в основном разделяет пакет на 3 пакета - A, B и Common (index.js, tests.js и app.js в моем случае, когда фактический код приложения находится в app.js).

Что у меня есть до сих пор

gulpfile.js [только соответствующий код]:

критический код - это bundleTypescript функция

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 be replaced by 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
}

полный файл gulp можно найти здесь: https://jsfiddle.net/4ajba1nx/

Почему изменения не отражаются, когда Browsersync перезагружает браузер