gulp 使用浏览器同步进行构建并做出反应而不是重新加载页面

Question

我有一个包含以下 build 任务的 gulpfile：

var gulp = require('gulp'),
    source = require('vinyl-source-stream'),
    buffer = require('vinyl-buffer'),
    babelify = require('babelify'),
    browserify = require('browserify'),
    uglify = require('gulp-uglify'),
    sourcemaps = require('gulp-sourcemaps'),
    bs = require('browser-sync').create('BrowserSync');

gulp.task('build', function () {
    return browserify({entries: './src/app.js', debug: true})
        .transform("babelify", { presets: ['es2015','react'] })
        .bundle()
        .pipe(source('app.js'))
        .pipe(buffer())
        .pipe(sourcemaps.init())
        .pipe(uglify())
        .pipe(sourcemaps.write('./maps'))
        .pipe(gulp.dest('./dist/js'))
        .pipe(bs.reload({stream: true}));
});

这个过程完美地构建了我的文件，但是我的浏览器没有加载。为什么我的浏览器不重新加载？我如何实现所需的行为？我觉得我遗漏了一些关于 BrowserSync.

的东西

注意： 我相当有信心 BrowserSync 工作正常，因为我在另一个任务中调用 bs.reload()，并且页面重新加载完美。如果需要，很乐意粘贴更多代码。

Answer 1

这是我不久前开始的 starter project 中的一个片段，它可以实现您提到的内容...

/*...*/
gulp.task('watchify', () => {
  let args = merge(watchify.args, { debug: true })
  let bundler = watchify(browserify('./src/js/app.js', args)).transform(babelify, { presets: ["es2015", "react"] })
  bundle(bundler)

  bundler.on('update', () => {
    bundle(bundler)
  })
})


function bundle(bundler) {
  return bundler.bundle()
    .on('error', map_error)
    .pipe(source('app.js'))
    .pipe(buffer())
    .pipe(rename('app.min.js'))
    .pipe(sourcemaps.init({ loadMaps: true }))
      // capture sourcemaps from transforms
      .pipe(uglify())
    .pipe(sourcemaps.write('./maps'))
    .pipe(gulp.dest('./dist/js'))
    .pipe(sync.reload({
            stream: true
    }))
}
/*...*/

// watching multiple files with a task 'watch'
gulp.task('default', () => {
    gulp.watch('src/js/**/*.js', ['watchify']);
});

Answer 2

启动 browsersync 的 gulp 任务由 gulp 运行执行，因为它是在默认任务中触发的。

然后我从终端手动运行 gulp build，这就是问题所在。因此，此手动命令无法访问由默认 gulp 进程创建的 browsersync 实例。

所以让 gulp build 运行自动使用可用的实例化版本就成功了。

gulp 使用浏览器同步进行构建并做出反应而不是重新加载页面

gulp build with browser sync and react not reloading page

node.js

reactjs

gulp

browser-sync