Установка Browser Sync на Windows 10

логотипы браузеров

Browser Sync можно использовать для различных задач, например для более удобной работы над сайтом без использования таких расширений как livereload и ему подобных.

Для работы browser sync сначала потребуется установить на компьютер nodejs, скачать актуальную версию можно с официальной страницы nodejs.org. После установки переходим на сайт browsersync.io, где сразу видим команду необходимую для установки: nmp install -g browser-sync

Для ввода команды через командную строку кликаем правой кнопкой мыши на значок Windows и в открывшемся контекстном меню выбираем пункт Командная строка (администратор). Вставляем команду установки в командную строку, жмём Enter и ожидаем окончания установки.

Теперь для того чтобы воспользоваться BS и наблюдать онлайн все вносимые изменения в файлы проекта через браузер, зажимаем клавишу Shift и кликаем правой кнопкой мыши на папке с рабочим проектом. В появившемся контекстном меню выбираем открыть окно команд, после чего откроется консоль в которую вводим следующую команду: browser-sync start --server --files "./*.php", ./*.css, ./*.js, ./*.html"

Далее браузер откроет ваш проект по локальному адресу, все вносимые правки будут отображаться в браузере сразу после сохранения их в самом файле проекта. То есть теперь вы можете после запуска browser sync работать с файлами проекта через редактор кода, а изменения будут отображаться в браузере без необходимости перезагружать web страницу вручную.

Также благодаря bs вы можете просматривать одну и ту же страницу документа синхронно в разных браузерах одновременно, просто откройте во втором браузере адрес localhost:3000, при скроле документа в одном браузере то же самое произойдёт и в другом. Также возможна синхронизация с другими устройствами своей сети.

Для более подробных настроек и использования других функций можно воспользоваться web интерфейсом, который открывается по адресу localhost:3001.

Отличная альтернатива Live reload и его аналогам!