Как настроить синхронизацию браузера для просмотра файлов и автоматической навигации к измененному / добавленному файлу - PullRequest
Новая
       98

Как настроить синхронизацию браузера для просмотра файлов и автоматической навигации к измененному / добавленному файлу

0 голосов
/ 20 октября 2019

Я работаю над многими файлами .html и хотел бы, чтобы браузер-синхронизатор автоматически переходил к измененному файлу.

  1. Браузер-синхронизация запущена, браузер показывает http://localhost/file-01.html
  2. Изменить file-42.html, нажать Сохранить
  3. Браузер-синхронизация переходит к http://localhost/file-42.html

Обычно, если я сохраняю file-42.html file-01.html, перезагрузка в браузере, которыйне полезно. Я хочу синхронизировать редактор и браузер при сохранении.

Что я могу использовать, чтобы получить такое поведение?

1 Ответ

0 голосов
/ 20 октября 2019

Раньше я мог делать это в gulp-server-livereload , но теперь это больше не поддерживается и содержит ошибки, поэтому мне нужно перейти на другой локальный сервер разработки. Запрос функции: возможность автоматической навигации по измененному файлу · Проблема № 46 · hiddentao / gulp-server-livereload

live-server не имеет этой функциилибо Запрос функции: возможность автоматической навигации по измененному файлу · Выпуск # 304 · tapio / live-server

В браузер-синхронизация Мне удалось получить егозлоупотребляя .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;

Это хакерское решение, хотя и имеет преимущество, что оно только на стороне сервера. Любая страница может быть перемещена автоматически, без какого-либо кода на стороне клиента, для получения и интерпретации сообщений с сервера.

Есть ли правильный способ получить такое поведение? bs.reload('file-42.html) `не работает. Я посмотрел на API, может быть, что-то я пропустил?

...