Живая перезагрузка — это техника в веб-разработке, которая позволяет разработчику видеть результат своего кода без обновления браузера.
В традиционном процессе вы должны нажать F5 или кнопку Обновить в своём браузере, чтобы попросить его обновить внесённые изменения. Это заставляет вас поочерёдно переключаться между редактором и браузером. Один раз, два, три раза и больше. Вы можете заметить, что эта привычка может оказаться очень утомительной и трудоёмкой.
Цель живой перегрузки — избежать ручной работы. Каждый раз, когда вы нажимаете Ctrl + S или сохраняетесь, ваш браузер будет перезагружаться самостоятельно. Круто!
Существует приложение под названием liveReload, которое вы могли бы использовать в сочетании с плагином Google Chrome, чтобы обеспечить живую перезагрузку. Я попытался заставить его работать как на Linux, так и Windows, но не мог. Поэтому, пожалуйста, простите меня. Одно несомненно, сегодня этот плагин есть с Gulp (gulp-livereload) и вы можете его опробовать.
Browsersync Tutorial for Beginners
Я не единственный, у кого не всё хорошо с liveReload. Большинство людей, несомненно, сталкивались со многими трудностями, пытаясь использовать его, так что они создали ему полную замену: gulp-browserSync.
Живая перезагрузка с gulp-browserSync
BrowserSync является вероятно одним из самых полезных плагинов, который хотелось бы иметь разработчику. Он на деле даёт вам возможность запустить сервер, на котором вы можете выполнять свои приложения. Он заботится о перезагрузке ваших HTML/PHP-файлов. У него также есть возможность обновить/внедрить CSS и JavaScript-файлы в HTML и многое другое. С помощью этого плагина вы идёте исключительно вперёд.
Теперь посмотрим, как это работает. Перейдите в папку проекта и установите плагин browser-sync так:
npm install —save-dev browser-sync
Включите его в файл gulpfile.js:
var browserSync = require(‘browser-sync’);
Функция перезагрузки BrowserSync называется reload() . Давайте вызовем её и сохраним в переменной, просто для понятности.
var reload = browserSync.reload;
Обратите внимание, что там, где я использую reload() вы также можете использовать browserSync.reload() .
Задайте переменную paths вроде этого:
var paths = < html:[‘index.html’], css:[‘main.scss’], script:[‘script.coffee’] >;
Эти файлы мы отслеживаем на любые изменения.
Быстрое Знакомство с BrowserSync
Cory Simmons Last updated Sep 18, 2014
Read Time: 1 min
В этом коротком видео туториале я собираюсь познакомить вас с BrowserSync, инструмент настолько хорош, что даже Google добавил его в последнюю версию Web Starter Kit. BrowserSync похож на LiveRealod(который следит за изменениями на странице и автоматически обновляет браузер), однако BrowserSync также работает одновременно на нескольких устройствах.
BrowserSync — #1 — Установка и обзор возможностей
BrowserSync обладает огромным количеством полезных функций и особенностей, включая Action Sync, который позволяет синхронизировать скролл и клики на всех устройствах. Он может быть использован в сборщиках на подобии Grunt или Gulp, хотя сегодня мы будем его использовать сам по себе. Кроме этого он способен на многое. Так что давайте приступим!
Посмотрите Скринкаст
Полезные Ссылки
- www.browsersync.io
- Google Web Starter Kit документация: Синхронизация и тестирование на разных устройствах
- Начинаем работать с Google Web Starter Kit
Источник: webdesign.tutsplus.com
Browsersync — полезный инструмент для верстальщика
Для того чтобы постоянно не обновлять страницу во время верстки, а страница обновлялась самостоятельно при внесении изменений — мы автоматизируем этот процесс.
Для начала установим node.js, переходим на сайт nodejs.org, скачиваем и устанавливаем, версию лучше выбрать LTS т.к. она более стабильная.
Теперь можно установить пакет browsersync, открываем консоль и вписываем:
npm install -g browser-sync
После непродолжительной установки, мы можем начать пользоваться этим пакетом.
Переходим в директорию с нашим проектом использую команду CD.
cd f:OneDriveWORCsitesnikovit.ru
Например чтобы перейти в директорию на диске F, мы сначала меняем диск командой:
а затем переходим в нужную директорию командой:
И запускаем сервер browser-sync командой:
browser-sync start -s -f «*.html, *.php, css/*.css»
ключи запуска:
-s — browser-sync работает в режиме сервера
-f — отслеживает изменения в файлах
— *.html, *.php — изменения в файлах html и php
— изменения в файлах css в папке css
Теперь при изменении файлов страница автоматически перезагрузиться в браузере.
Источник: nikovit.ru