Browser Sync установка

Установка 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 и его аналогам!