我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