我browsersync服务器刷新页面，但与旧的内容

Question

我想

我想要什么设置一口捆绑我的文件，我修改源代码，并自动重新加载浏览器。

我使用browser-sync作为我的开发服务器，browserify将我的javascript文件和gulp捆绑为我的任务运行器。

什么问题

它工作在第一，但现在当我保存源文件时，浏览器被重新加载，但旧的代码加载和变化不会反映。我需要手动刷新浏览器。

我责怪因子束browserify插件，它基本上将束分成3束--A，B和Common（index.js，tests.js和app.js，在我的情况下，实际的应用程序代码在应用程序中。 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 
} 

完全吞掉文件可以在这里找到：https://jsfiddle.net/4ajba1nx/

为什么变化不是参考当浏览器同步重新加载浏览器时被引用

Answer 1

我可以看到这个问题在几天前发布。但无论如何，如果你仍然无法解决问题，我会尽量回答它，或者它可以帮助其他面临类似问题的人。

我怀疑问题是由下面这行代码来：

.pipe(browserSync.stream()); 

它被放置在流管道的错误的顺序。会发生什么是BrowserSync接收并传输前一行gulp.dest（）的输出。

我建议这条线后，将其移动：

merge(appStream, indexStream, testStream) 

其结果将是：

merge(appStream, indexStream, testStream) 
    .pipe(browserSync.stream()) 

后的3束合并结果将通过管道输送到BrowserSync这将流，其意味着它到浏览器。

在这里，你可以找到它结合了咕嘟咕嘟+ Browserfy + BrowserSync与CSS注入一个样板项目：https://github.com/anass-b/Gulp_Browserfy_BrowserSync