Что я хочу
Я хочу настроить 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 перезагружает браузер