マイbrowsersyncサーバーがページをリフレッシュしますが、古いコンテンツを

Question

は私がソースコードに変更を加えると、自動的にブラウザをリロードすると、私のファイルをバンドルするためのセットアップ一口に

私はしたいが欲しいです。

開発用サーバーにbrowser-syncを、browserifyにjavacriptファイルを、gulpにタスクランナーを割り当てています。

それは最初に勤務していましたが、私は、ソースファイルを保存するときに、今、ブラウザがリロードされますが、古いコードがロードされ、変更が反映されない問題

は何ですか。ブラウザを手動で更新する必要があります。

私はblame factor-bundle browserifyプラグインを提供しています。これは基本的にバンドルをA、B、Commonの3つのバンドルに分割しています（実際のアプリケーションコードが入っている私の場合は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にパイプされることを意味し、どのそれをブラウザに送ります。 https://github.com/anass-b/Gulp_Browserfy_BrowserSync