Как Browsersync облегчает верстку проектов

Если вы проходите проекты профессии «Верстальщик» — вы можете столкнуться с проблемой: для того, чтобы увидеть изменения, нужно перезагрузить страницу.

В этой заметке я покажу, как «поднять localhost» с помощью утилиты Browsersync.

Установим его глобально:

npm install -g browser-sync

Переходим в папку с проектом:

cd ~/path_to_project

Запускаем:

browser-sync start --server --no-notify --no-ui --files *

Используемые параметры:

• --server — запустить локальный сервер;
• --no-notify — отключить уведомления;
• --no-ui — не запускать «админку»;
• --files * — следить за изменениями всех файлов в директории.

Команда длинная, писать долго, а запомнить все параметры тяжело, да и не нужно.

Создадим алиас. В файле .bashrc или .zshrc (зависит от того, чем пользуетесь):

alias bs="browser-sync start --server --no-notify --no-ui --files *"

Обновляем окружение:

source ~/.bashrc
// or
source ~/.zshrc

Вот и все, теперь, находясь в корне проекта, локальный сервер можно запустить командой:

bs

Более подробно с данным инструментом можно ознакомиться в документации.

— Все вышеперечисленное можно сделать и локально в проекте. Оставлю это на самостоятельное изучение.