Как запустить браузер синк

Обновлено: 04.07.2024

Browser Sync упрощает веб-разработку за счёт запуска веб-сервера и его быстрой перезагрузки в реальном времени. У Browser Sync есть и другие возможности, такие как синхронизация действий на нескольких устройствах.

Сперва нам следует установить Browser Sync:

Возможно, вы заметили, что при установке Browser Sync отсутствует префикс gulp- . Это связано с тем, что Browser Sync работает с Gulp, поэтому нам не нужно использовать плагин.

Чтобы воспользоваться Browser Sync, потребуется его подключить через оператор require .

Нам понадобится создать задачу browserSync , чтобы позволить Gulp перезагружать сервер через Browser Sync. Для этого нужно сообщить Browser Sync, где располагается корень сервера. В нашем случае это папка app:

Мы также должны немного изменить задачу sass , чтобы Browser Sync мог обновлять CSS в браузере всякий раз, когда выполняется задача sass .

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

Будет неудобно открывать две командные строки и выполнять gulp browserSync и gulp watch по отдельности, так что заставим Gulp запускать их вместе. Для этого сообщим задаче watch , что задача browserSync должна быть завершена до запуска watch . Мы можем сделать это, добавив второй аргумент к задаче watch . Синтаксис следующий:

В нашем случае мы добавляем задачу browserSync .

Теперь при выполнении gulp watch в командной строке, Gulp должен одновременно запустить задачи sass и browserSync . После их завершения будет запущена задача watch .


Одновременно с этим откроется окно браузера, которое указывает на app/index.html. Если вы измените файл styles.scss, то увидите, как браузер перезагружается автоматически.

Есть ещё одна вещь, о которой надо сказать. Поскольку мы уже отслеживаем файлы .scss для перезагрузки, то почему бы не пойти дальше и перезагружать браузер при сохранении какого-либо файла HTML или JavaScript? Мы можем сделать это, добавив ещё два процесса и вызвав функцию browserSync.reload при сохранении файла:

Итак, в этом разделе мы научились трём вещам:

  1. запускать веб-сервер для разработки;
  2. использовать препроцессор Sass;
  3. перезагружать браузер при сохранении файла.

В следующем разделе мы рассмотрим оптимизацию ресурсов. Начнём с оптимизации файлов CSS и JavaScript.

Есть сайт у которого нет мобильной версии, и нужно с минимальными затратами времени сделать мобильным пользователям этот сайт приятнее в использовании.

Я расскажу о том как ускорить внесение изменений на сайт, и рассмотрю инструменты для быстрой верстки на живом сайте не имея доступа для его редактирования.

Можно пойти обычным путем – скопировать сайт и доработать его на своей машине, или же писать все прямо на работающий сайт (так лучше не делать).


Тут на помощь приходят юзерскрипты, livereload, sass или другие препроцессоры. С этим набором время адаптирования сайта сокращается в несколько раз.

1. Юзерскрипт

Начну с юзерскриптов — для этого можно использовать любой плагин для браузера на базе chromium, firefox.

Для хрома подойдёт tampermonkey, показываю на его примере.

Добавление css и viewport

Захожу на сайт жертву и смотрю что там есть в теге head, в большинстве случаев необходимо добавить тег meta, viewport и стили которые я буду писать в конец тега head.


Если на сайте подключен jQuery — то используем его, если нет то обычный JavaScript.
Готово. Теперь при просмотре видно, что теги добавлены и уже можно работать, указав прямой путь к файлу на диске. Я пойду дальше включив сервер.

Сервер для раздачи css

Для того чтобы запустить у себя сервер можно воспользоваться одним из множества или использовать плагин в вашем редакторе.

Если у вас установлен npm то используйте пакет static, если стоит php можно использовать его сервер и так далее.

Есть путь ещё проще это использовать visual studio code и плагины к нему например популярный live server.


Откройте директорию с файлами css в vscode и просто нажмите в баре кнопку go live — запустится сервер localhost:5500, таким образом в теге link я просто укажу localhost:5500/common.css

Препроцессоры

Я не хочу писать на голом css и хочу использовать sass, поэтому ещё поставлю live sass compiler в vscode. Если вы используете другой сервер, вы можете воспользоваться официальной программой sass, указав в консоли в директории которую раздает сервер sass watch common.sass
Теперь у меня есть инструменты чтобы писать адаптив для любого сайта, не имея доступа к коду этого сайта.


Автообновление

Дополнительное удобство это автообновление страницы при изменении файла css. Для автообновления я использую livereload, плагины livereload есть для большинства популярных редакторов и браузеров на базе chromium и firefox.

Ставлю расширение в хром и расширение в vscode. Запускаю сервер livereload командой в строке команд vscode ctrl+shift+p >livereload start.

После этого в браузере нажимаю на появившуюся после установки расширения кнопку. Все, при изменении стиля css сразу же видны изменения на сайте.


2. Второй путь все в одном, Browser-sync

NPM и browser-sync. Если вы знаете эти 2 слова то вероятно пойти лучше таким путем.

Дополнение: Я попробовал такой подход, это оказалось очень удобно и самое главное — очень просто! Позднее я напишу подробную статью о таком подходе в примере создания адаптивных стилей для любого сайта.
Еще раз спасибо хабраюзеру monochromer

Инструкция

  1. Поставьте nodejs (если у вас еще не установлен)
  2. В папке с проектом инициализируйте проект в консоли npm init (при инициализации достаточно ввести название проекта)
  3. Установите Browser-sync: наберите в консоли npm i browser-sync --save-dev
  4. Скопируйте конфиг указанный ниже и создайте файл .js с любым именем (например proxy.js) и не забудьте поменять в конфиге url с которым вы будете работать
  5. Запустите в консоли node proxy.js
  6. Готово, сервер запущен. Browser-sync при изменении файлов, которые вы положите в папку static будет автоматически перезагружать страницу.

Плюсы такого подхода:

  1. Вы работаете в своем любимом редакторе и не ограничены функциональностью браузерного расширения
  2. Версионирование с помошью git, например

Теперь если у вас уже достаточно умений в адаптивной вёрстке вы сможете адаптировать сайт для мобильной аудитории которая сейчас составляет в среднем 50 процентов и поисковики напрямую пишут о том что мобильная версия нужна и проверяют ее наличие.

После того как вы закончите останется лишь закачать стили на сайт и добавить пару тегов в head.

Дополнение: В комментариях ниже ivan386 написал, что неплохо бы привести пример стилей. В таком случае понадобится написание новой статьи в которой я в качестве жертвы возьму какой-нибудь государственный сайт и его адаптирую, с добавлением мобильного меню.

Живая перезагрузка — это техника в веб-разработке, которая позволяет разработчику видеть результат своего кода без обновления браузера.

В традиционном процессе вы должны нажать F5 или кнопку Обновить в своём браузере, чтобы попросить его обновить внесённые изменения. Это заставляет вас поочерёдно переключаться между редактором и браузером. Один раз, два, три раза и больше. Вы можете заметить, что эта привычка может оказаться очень утомительной и трудоёмкой.

Цель живой перегрузки — избежать ручной работы. Каждый раз, когда вы нажимаете Ctrl + S или сохраняетесь, ваш браузер будет перезагружаться самостоятельно. Круто!

Существует приложение под названием liveReload, которое вы могли бы использовать в сочетании с плагином Google Chrome, чтобы обеспечить живую перезагрузку. Я попытался заставить его работать как на Linux, так и Windows, но не мог. Поэтому, пожалуйста, простите меня. Одно несомненно, сегодня этот плагин есть с Gulp (gulp-livereload) и вы можете его опробовать.

Я не единственный, у кого не всё хорошо с liveReload. Большинство людей, несомненно, сталкивались со многими трудностями, пытаясь использовать его, так что они создали ему полную замену: gulp-browserSync.

Живая перезагрузка с gulp-browserSync

BrowserSync является вероятно одним из самых полезных плагинов, который хотелось бы иметь разработчику. Он на деле даёт вам возможность запустить сервер, на котором вы можете выполнять свои приложения. Он заботится о перезагрузке ваших HTML/PHP-файлов. У него также есть возможность обновить/внедрить CSS и JavaScript-файлы в HTML и многое другое. С помощью этого плагина вы идёте исключительно вперёд.

Теперь посмотрим, как это работает. Перейдите в папку проекта и установите плагин browser-sync так:

Включите его в файл gulpfile.js:

Функция перезагрузки BrowserSync называется reload() . Давайте вызовем её и сохраним в переменной, просто для понятности.

Обратите внимание, что там, где я использую reload() вы также можете использовать browserSync.reload() .

Задайте переменную paths вроде этого:

Эти файлы мы отслеживаем на любые изменения.

Мы создали задачу для файлов Sass и JavaScript, теперь давайте добавим одну для HTML-файлов.

Всё что делает эта задача — пропускает наш HTML-файл через функцию reload() из browser-sync. Если вы, к примеру, используете jade то могли бы компилировать его до перезагрузки.

Делаем то же самое с нашими существующими задачами:

browser-sync нужно знать расположение файлов, которые мы перезагружаем/синхронизируем и запустить мини-сервер основанный на этом; порт для прослушивания; прокси, если возможно и др. Посмотрите все варианты здесь.

Давайте настроим browser-sync и предоставим ему всю информацию.

Обратите внимание, что если вы не указали точный номер порта, browser-sync будет использовать порт 3000 по умолчанию.

Теперь добавьте эту задачу в задачу watcher:

И, наконец, подретушируем задачу default:

Окончательно файл gulpfile.js должен выглядеть следующим образом:

После этого перейдите в папку проекта, если вы ещё не там, и запустите gulp. Сделайте несколько изменений в HTML или Sass-файле и наблюдайте магию Gulp! Если всё пойдёт хорошо, в консоли у вас должно быть что-то вроде следующего.


Browser-sync и PHP-файлы

Измените файл index.html на index.php и подправьте пути так:

Это предполагает, что вы хотите работать с PHP, а не только с HTML. Перейдите к командной строке, остановите текущий процесс через Ctrl + C , а затем запустите gulp снова.

Помните, перед выполнением любых инструкций PHP, вам нужен сервер PHP. Так что через эту ошибку Gulp пытается сказать нам, что никакого PHP-сервера не найдено.

Всё, что нам нужно сейчас сделать — это запустить сервер PHP вместе с нашими задачами. Для этого мы используем плагин gulp-connect-php.

Запуск PHP-сервера по требованию с browserSync

Прежде всего, начнём с установки плагина gulp-connect-php, который нам поможет.

Теперь включим его в gulpfile.js:

Добавим задачу php:

Подробнее о настройках gulp-connect-php читайте здесь. Поскольку мы можем установить port , baseDir и другие параметры из настроек PHP-сервера, мы можем модифицировать нашу задачу browserSync и сделать её легче:

Обратите внимание: я создал сервер не из browserSync, а из PHP. Скорее создал прокси для browserSync.

Окончательный файл должен выглядеть следующим образом:

Резюме

Живая перезагрузка — это интересная функция, с которой вы действительно можете наслаждаться Gulp. По-прежнему есть несколько способов написания задач и особенно, когда сочетается browserSync и gulp-connect-php. Я приглашаю вас посмотреть соответствующие сайты ради новых идей.

Читайте также: