Для чего нужен browser sync
Рай для верстальщика: синхронизация окон браузеров
Вспомните, как обычно происходит верстка макета? Вносим изменения в css. Сохраняем. Переключаемся на Chrome. Обновляем страницу. Тестируем. Переключаемся на Firefox. Обновляем страницу. Тестируем. Переключаемся на IE. Обновляем страницу. Тестируем. Повторяем сначала.
Каждый может делать это по-разному, но суть останется прежней: тестирование в разных браузерах очень долгий и муторный процесс. Но мы с вами сейчас попробуем его немного оптимизировать. И в этом нам поможет утилита browser-sync. Как можно прочитать на их сайте, программа умеет не только отслеживать изменения в файлах проекта и автоматически перезагружать вкладки, но и позволяет синхронизировать навигацию в каждом браузере. Вот так это работает:
Каждый раз, когда я нажимаю сохранить, вкладка обновляется автоматически. Все становиться еще удобнее, когда у вас два экрана: на первом среда разработки, а на втором 3-4 открытых браузеров. Если честно, я не придумал, как показать вам оба экрана, так что как-то так.
Более того, можно тестировать на нескольких устройствах, использующих общее подключение: телефоны, планшеты, компьютеры с разными мониторами. Все что нужно для их синхронизации: открыть url, предоставляемый этой утилитой.
Установка
Надеюсь я успел вас достаточно заинтересовать, потому что почти все, что мы будем делать ниже, может испугать:) Нужная нам утилита является модулем для Node.js. Для её установки нам потребуется пакетный менеджер npm, поставляемый с нодой. Кто знает что это такое, может сразу перейти на сайт http://www.browsersync.io/ и следуя простым инструкциям (нет, действительно, всего три шага) установить и настроить. Для тех кто никогда не слышал ни о npm, ни о Node.js, быстро пробежимся по установке.
Для начала идем на сайт Node.js, скачиваем и устанавливаем. Тут ничего сложного: далее, далее, далее, готово. Откройте консоль (я пользуюсь встроенный в PhpStorm) и выполните команду: Это команда установит browser-sync. Если в консоли появилось «‘npm’ не является внутренней или внешней командой. «, просто перезагрузите компьютер и попробуйте снова.
Если все прошло удачно, поздравляю, все установлено и готово к работе. Ничего ведь сложного?
Настройка
Первую пару url (Local) вы можете использовать для синхронизации браузеров на нескольких устройствах. Просто откройте его и все заработает. Вторая пара нужна для перехода к настройкам синхронизации:
Помните, я говорил, что можно синхронизировать навигацию всех браузеров? Настраивается это здесь: переход по ссылкам, отправка форм, скроллинг.
Теперь, если вы используете локальный сервер, и вам нужно синхронизировать браузеры при изменении php (или других) файлов, необходимо использовать режим proxy:
Browser-sync имеет множество настроек, описывать их я не буду, просто дам ссылку: http://www.browsersync.io/docs/command-line/ Там же можно посмотреть и примеры использования.
Для выхода из программы, в окне консоли нажмите Ctrl+C, и введите y в ответ на подтверждение выхода.
Синхронизация браузера между устройствами
— это обмен данными между браузерами на ваших устройствах. Для промежуточного хранения данных используется сервер Яндекса, куда информация передается по защищенному каналу, а пароли — в зашифрованном виде. Данные на сервере защищены системой авторизации. Синхронизация обеспечивает доступ к данным со всех ваших устройств и восстановление данных, если устройство потерялось или сломалось.
Зачем нужна синхронизация?
По умолчанию синхронизируются вкладки, закладки, пароли, история, расширения, плагины и данные автозаполнения.
Синхронизация позволит вам:
В любой момент вы можете отключить синхронизацию или изменить список данных, которые хотите синхронизировать.
Как часто синхронизируются данные?
После того как вы включили синхронизацию, она будет выполняться каждый раз, когда вы меняете данные, хранящиеся на сервере. Например: вы добавляете на устройстве закладку — браузер отправляет ее на сервер и одновременно скачивает все изменения, сделанные вами на других устройствах (начиная с момента последней синхронизации).
Как включить синхронизацию?
Синхронизация работает при выполнении следующих условий:
Чтобы включить синхронизацию:
Изменение списка данных для синхронизации
Удаление синхронизированных данных
Как удалить данные со всех синхронизированных устройств:
После этого ваши данные будут удалены с сервера, а во время следующего сеанса синхронизации — со всех синхронизированных устройств, подключенных к вашему аккаунту.
Отключение синхронизации
Синхронизация браузера между устройствами
— это обмен данными между браузерами на ваших устройствах. Для промежуточного хранения данных используется сервер Яндекса, куда информация передается по защищенному каналу, а пароли — в зашифрованном виде. Данные на сервере защищены системой авторизации. Синхронизация обеспечивает доступ к данным со всех ваших устройств и восстановление данных, если устройство потерялось или сломалось.
Зачем нужна синхронизация?
По умолчанию синхронизируются вкладки, закладки, пароли, история, расширения, плагины и данные автозаполнения.
Синхронизация позволит вам:
В любой момент вы можете отключить синхронизацию или изменить список данных, которые хотите синхронизировать.
Как часто синхронизируются данные?
После того как вы включили синхронизацию, она будет выполняться каждый раз, когда вы меняете данные, хранящиеся на сервере. Например: вы добавляете на устройстве закладку — браузер отправляет ее на сервер и одновременно скачивает все изменения, сделанные вами на других устройствах (начиная с момента последней синхронизации).
Как включить синхронизацию?
Синхронизация работает при выполнении следующих условий:
Чтобы включить синхронизацию:
Изменение списка данных для синхронизации
Удаление синхронизированных данных
Как удалить данные со всех синхронизированных устройств:
После этого ваши данные будут удалены с сервера, а во время следующего сеанса синхронизации — со всех синхронизированных устройств, подключенных к вашему аккаунту.
Живая перезагрузка
Живая перезагрузка — это техника в веб-разработке, которая позволяет разработчику видеть результат своего кода без обновления браузера.
В традиционном процессе вы должны нажать 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:
Задайте переменную 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 и подправьте пути так:
Gulp выполнит ваше приложение на http://localhost:8080, но вы увидите только это на странице:
Помните, перед выполнением любых инструкций PHP, вам нужен сервер PHP. Так что через эту ошибку Gulp пытается сказать нам, что никакого PHP-сервера не найдено.
Всё, что нам нужно сейчас сделать — это запустить сервер PHP вместе с нашими задачами. Для этого мы используем плагин gulp-connect-php.
Запуск PHP-сервера по требованию с browserSync
Прежде всего, начнём с установки плагина gulp-connect-php, который нам поможет.
Теперь включим его в gulpfile.js:
Добавим задачу php:
Обратите внимание: я создал сервер не из browserSync, а из PHP. Скорее создал прокси для browserSync.
Окончательный файл должен выглядеть следующим образом:
Резюме
Живая перезагрузка — это интересная функция, с которой вы действительно можете наслаждаться Gulp. По-прежнему есть несколько способов написания задач и особенно, когда сочетается browserSync и gulp-connect-php. Я приглашаю вас посмотреть соответствующие сайты ради новых идей.
Синхронизация браузера между устройствами
— это обмен данными между браузерами на ваших устройствах. Для промежуточного хранения данных используется сервер Яндекса, куда информация передается по защищенному каналу, а пароли — в зашифрованном виде. Данные на сервере защищены системой авторизации. Синхронизация обеспечивает доступ к данным со всех ваших устройств и восстановление данных, если устройство потерялось или сломалось.
Зачем нужна синхронизация?
По умолчанию синхронизируются вкладки, закладки, пароли, история, расширения, плагины и данные автозаполнения.
Синхронизация позволит вам:
В любой момент вы можете отключить синхронизацию или изменить список данных, которые хотите синхронизировать.
Как часто синхронизируются данные?
После того как вы включили синхронизацию, она будет выполняться каждый раз, когда вы меняете данные, хранящиеся на сервере. Например: вы добавляете на устройстве закладку — браузер отправляет ее на сервер и одновременно скачивает все изменения, сделанные вами на других устройствах (начиная с момента последней синхронизации).
Как включить синхронизацию?
Синхронизация работает при выполнении следующих условий:
Чтобы включить синхронизацию:
Изменение списка данных для синхронизации
Удаление синхронизированных данных
Как удалить данные со всех синхронизированных устройств:
После этого ваши данные будут удалены с сервера, а во время следующего сеанса синхронизации — со всех синхронизированных устройств, подключенных к вашему аккаунту.
Отключение синхронизации
Синхронизация браузера между устройствами
— это обмен данными между браузерами на ваших устройствах. Для промежуточного хранения данных используется сервер Яндекса, куда информация передается по защищенному каналу, а пароли — в зашифрованном виде. Данные на сервере защищены системой авторизации. Синхронизация обеспечивает доступ к данным со всех ваших устройств и восстановление данных, если устройство потерялось или сломалось.
Зачем нужна синхронизация?
По умолчанию синхронизируются вкладки, закладки, пароли, история, расширения, плагины и данные автозаполнения.
Синхронизация позволит вам:
В любой момент вы можете отключить синхронизацию или изменить список данных, которые хотите синхронизировать.
Как часто синхронизируются данные?
После того как вы включили синхронизацию, она будет выполняться каждый раз, когда вы меняете данные, хранящиеся на сервере. Например: вы добавляете на устройстве закладку — браузер отправляет ее на сервер и одновременно скачивает все изменения, сделанные вами на других устройствах (начиная с момента последней синхронизации).
Как включить синхронизацию?
Синхронизация работает при выполнении следующих условий:
Чтобы включить синхронизацию:
Изменение списка данных для синхронизации
Удаление синхронизированных данных
Как удалить данные со всех синхронизированных устройств:
После этого ваши данные будут удалены с сервера, а во время следующего сеанса синхронизации — со всех синхронизированных устройств, подключенных к вашему аккаунту.
Time-saving synchronised browser testing.
It’s wicked-fast and totally free.
Your indispensable test assistant.
With each web page, device and browser, testing time grows exponentially. From live reloads to URL pushing, form replication to click mirroring, Browsersync cuts out repetitive manual tasks. It’s like an extra pair of hands. Customise an array of sync settings from the UI or command line to create a personalised test environment. Need more control? Browsersync is easily integrated with your web platform, build tools, and other Node.js projects.
Works stand-alone, or integrates with your current build tools
Awesome Features
Install and run anywhere
Built on Node.JS_ENTRY to support Windows, MacOS and Linux. Setup in less than 5 minutes.
Free to run and reuse
Browsersync is an open source project available to use under the Apache 2.0 License.
Build-tool compatible
Easily integrated with task runners like Grunt and Gulp, or included in other Node projects.
Network Throttle
Test your website against a slower connection. Even when devices are connected to wifi.
Interaction sync
Your scroll, click, refresh and form actions are mirrored between browsers while you test.
File sync
Browsers are automatically updated as you change HTML, CSS, images and other project files.
UI or CLI control
Run the new browser-based UI for quick control, or stick with the original command line usage.
Sync customisation
Toggle individual sync settings to create your preferred test environment.
URL history
Records your test URLs so you can push them back out to all devices with a single click.
Depended on by thousands
Browsersync is an open-source project with over 2 million npm downloads a month and is a dependency of nearly a million separate projects on github.
Tried and trusted.
Want to feel like a modern day demigod? Fire up Browsersync and control an entire device lab with your phone.
It has a fantastic feature-set and at least 5 developers I’ve spoken to this week alone swear by it for their own synchronized cross-device testing.
Get started in 5 minutes.
1. Install Node.js
Browsersync is a module for Node.js, a platform for fast network applications. There are convenient installers for MacOS, Windows and Linux.
2. Install Browsersync
The Node.js package manager (npm) is used to install Browsersync from a repository. Open a terminal window and run the following command:
You’re telling the package manager to download the Browsersync files and install them globally so they’re available to all your projects.
3. Start Browsersync
A basic use is to watch all CSS files in the css directory and update connected browsers if a change occurs. Navigate your terminal window to a project and run the appropriate command:
Static sites
Dynamic sites
If you’re already running a local server with PHP or similar, you’ll need to use the proxy mode. Browsersync will wrap your vhost with a proxy URL to view your site.