我想要什么

Question

我想要什么

我想设置gulp来捆绑我的文件，因为我对源代码进行了更改并自动重新加载浏览器。

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

问题是什么

它起初工作，但现在当我保存源文件时，浏览器被重新加载，但旧代码被加载并且没有反映更改。我需要手动刷新浏览器。

我责备factor-bundle browserify插件，它基本上将捆绑包分成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/

为什么在browserync重新加载浏览器时未反映更改

Answer 1

我可以看到这个问题是几天前发布的。但无论如何，如果你仍然无法解决问题，我会尝试回答它，或者它可能会帮助那些面临类似问题的人。

我怀疑问题来自这行代码：

.pipe(browserSync.stream());

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

我建议在此行之后移动它：

merge(appStream, indexStream, testStream)

结果将是：

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

这意味着在合并3个捆绑包后，结果将通过管道传输到BrowserSync，然后将其传输到浏览器。

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

我的browsersync服务器刷新页面但使用旧内容

我想要什么

问题是什么

到目前为止我有什么

1 个答案: