如何使浏览器同步以观看文件并自动导航到更改/添加的文件

Question

我正在处理许多.html文件，并希望浏览器同步自动导航到已更改的文件。

1. 浏览器同步启动，浏览器显示http://localhost/file-01.html
2. 编辑file-42.html，点击保存
3. 浏览器同步导航到http://localhost/file-42.html

通常，如果我保存file-42.html，则file-01.html将在浏览器中重新加载，这没有用。我想使编辑器和浏览器在保存时保持同步。

我可以用来获得这种行为吗？

Answer 1

我曾经能够在gulp-server-livereload中做到这一点，但是现在不再维护和越野车了，所以我必须移至另一个本地开发服务器。 Feature request: Option to auto-navigate to changed file · Issue #46 · hiddentao/gulp-server-livereload

[live-server也没有此功能Feature request: Option to auto-navigate to changed file · Issue #304 · tapio/live-server

在browser-sync中，我可以通过滥用.notify(msg, timeout)来使其正常工作>

.notify(msg, timeout)
这是一个骇人听闻的解决方案，尽管它确实具有服务器端的优势。任何页面都可以自动导航，而无需在其中包含任何客户端代码来接收和解释来自服务器的消息。

是否有适当的方法来获得这种行为？

// gulpfile.js
const gulp = require('gulp');
const bs = require('browser-sync').create();

function autoNavigate (cb) {
  bs.init({
    // Don't reload *.html, auto-navigate to changed instead
    ignore: ['*.html', 'gulpfile.js']
    notify: true
  });

  bs.watch('*.html', (event, file) => {
    if (event === 'change') {
      bs.notify(`<meta http-equiv="refresh" content="0; url=/${file}" />`);
    }
    if (event === 'add') {
      bs.notify(`<meta http-equiv="refresh" content="0; url=/${file}" />`);
    }
    // Needs debouncing or else rename events 404
    if (event === 'unlink') {
      // File removed, navigate to index
      bs.notify('<meta http-equiv="refresh" content="0; url=/" />');
    }
  });

  cb();
}

exports.serve = autoNavigate;

）`不起作用。我看过API，也许我错过了？