LiveReload — CoderLessons.com

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

Такое поведение кажется нам настолько присущим, что мы не ставим это под сомнение. И все же это может быть так просто. Есть небольшой инструмент под названием LiveReload, который волшебным образом перезагружает веб-страницу для нас, как только мы ее сохраняем. Возможно, вы слышали об этом, но никогда не пытались попробовать, так как у установки могут быть некоторые подводные камни. Следующее руководство покажет, как запустить LiveReload и, наконец, дать CMD + R (соответственно F5 для наших друзей по Windows) немного отдохнуть.

Это простые вещи

Самый простой способ принести облегчение – это одноименное приложение, которое можно найти в Mac App Store, при этом акцент здесь делается на «Mac», поскольку программа доступна только для этой ОС в окончательной версии. На сайте вы также найдете альфа-версию для Windows, но я никогда не проверял ее. Однако рабочий процесс, описанный ниже, должен быть более или менее одинаковым. Кроме того, роскошь приложения LiveReload имеет буквально свою цену, так как она стоит 8,99 евро (6,99 фунтов стерлингов / 9,99 долларов).

К счастью, как часто в жизни, есть альтернатива – может быть, не такая роскошная и немного потеющая, но столь же эффективная, как и платное приложение. LiveReload также готов к использованию непосредственно в любом любимом редакторе кода Sublime Text 2 и некоторых других (список всех поддерживаемых редакторов можно найти здесь , но я покажу вам от имени первого, как использовать плагин.

Требуется веб-сервер

Независимо от того, какое приложение вы выберете, обычно есть два способа использовать LiveReload в вашем ежедневном рабочем процессе. Каждому из них нужны некоторые приготовления, но они не так сложны. Самый эффективный способ – хотя это может показаться довольно сложным для начинающих – это настроить веб-сервер. Таким образом, вам не нужно изменять файлы вашего проекта, чтобы добавить поведение LiveReload. Самый простой способ – получить копию XAMPP ( Mac , Windows ) и запустить установщик.

После этого найдите каталог «htdocs», который обычно находится в «/ Applications / XAMPP / xamppfiles / htdocs» на Mac и «xampp \ htdocs» в Windows, создайте там новую папку и перетащите файлы своего веб-сайта. внутрь. Теперь вам просто нужно запустить веб-сервер на панели управления, нажав кнопку «Пуск» Apache. Теперь ваш сайт должен быть доступен по адресу http: // localhost / Посредством чего обозначает имя папки, которую вы только что создали.


Панель управления XAMMP. Mac (слева), Windows (справа)

Не забывайте свое расширение

Поверьте мне, теперь все намного проще. Следующее, что вам нужно установить, это расширение браузера LiveReload, которое вы можете найти здесь для Chrome и здесь для Firefox (да, нет IE). Теперь просто наведите приложение LiveReload на папку, в которую вы поместили свои файлы после настройки XAMPP, нажав на знак плюса в левом нижнем углу окна.


Добавьте проект, нажав на знак +.

Затем откройте URL-адрес localhost веб-сервера сверху и включите расширение LiveReload, щелкнув соответствующий символ (как показано на скриншотах ниже). Вернувшись в приложение LiveReload, оно должно теперь сказать что-то вроде «1 браузер подключен, пока 0 изменений обнаружено» внизу. Как только вы измените файл своего веб-сайта – будь то HTML, CSS или JavaScript – изменения должны быть немедленно отражены в браузере.


Кнопки для расширения LiveReload в Firefox (вверху) и Chrome (внизу).

Редактор кода, пожалуйста

Если вы предпочитаете оставаться в привычной для вас среде редактора кода – в данном случае Sublime Text 2, который я здесь приведу в качестве примера – реализация немного отличается. Сначала вам необходимо установить необходимый диспетчер пакетов Package Control, который просто требует ввода некоторого кода в консоль («Вид> Показать консоль» в строке меню Sublime Text 2). Точный процесс установки можно найти здесь .

После того, как вы перезапустили редактор, нажмите CMD + Shift + P (CTRL + Shift + P для Windows), чтобы открыть приглашение управления пакетами, введите «Установить» и «Управление пакетами: установить пакет» должно быть немедленно выделено. Затем нажмите Enter, подождите несколько секунд для загрузки, напишите «LiveReload», выберите появившуюся запись, снова нажмите «Enter» и плагин будет установлен. Теперь перезапустите Sublime Text 2 еще раз, и, как в родном приложении, вам просто нужно ввести локальный URL-адрес сверху в ваш браузер, включить плагин LiveReload, нажав на него, и с этого момента каждое изменение файлов вашего проекта напрямую отражается в вашем браузере без необходимости перезагрузки.


Что вводить в командной строке управления пакетами.

Гораздо проще

Если все это слишком сложно для вас, все еще остается второй способ использовать LiveReload, который я обещал выше. Это намного проще в настройке, но имеет недостаток в том, что вам нужно вставлять небольшой скрипт в каждую HTML (или PHP или любую другую) страницу вашего проекта (которую плагин браузера обрабатывает для вас при первом способе). Это выглядит так:

<script>document.write('<script src="http://' + (location.host || 'localhost').split(':')[0] + ':35729/livereload.js?snipver=1"></'
+ 'script>')</script>

Если ваш веб-сайт работает на другом сервере, вам нужно указать вместо этого IP-адрес вашего локального компьютера. Например:

<script src="http://192.168.0.1:35729/livereload.js? snipver=1"></script>

Вставьте его прямо перед закрытием

тег и все готово. Да, все готово. Вы можете подумать, что это намного проще, чем хлопоты с веб-серверами и расширениями браузера, но не каждый проект позволяет вставить что-то еще ненужное на каждую страницу. Но там, где тень, там и свет (или наоборот?). Если вы предпочитаете метод сценариев LiveReload, у вас есть большой бонус: живые изменения также доступны на других устройствах, кроме вашей разрабатываемой машины, что, однако, может снова потребовать веб-сервер. Хотите знать, как это сделать? Узнайте IP-адрес вашего компьютера и введите его – включая (веб-сервер) путь к вашему проекту – на ваше устройство, для которого вы хотите включить режим LiveReload.
Теперь, если вы измените файл, различия также волшебным образом появятся на вашем (мобильном) устройстве. Сладкий, а?

Метод сценария работает с приложением LiveReload, а также с Sublime Text 2 (или любым другим поддерживаемым редактором). Для полноты картины я также хочу упомянуть, что его можно комбинировать с расширением браузера, хотя это не имеет особого смысла, поскольку скрипт уже позаботится о том, чтобы LiveReload работал в любой среде.

Препроцессорная магия

Но LiveReload может предложить еще больше. Это идеальный компаньон для SASS, любимого препроцессора CSS, который, кажется, все используют. Компилятор запускается не только при сохранении основного файла SCSS, но и при редактировании части (включенного файла). Настройка может быть немного сложной, в зависимости от типа LiveReload, который вы хотите использовать, поскольку файл config.rb Кроме того, вы также можете использовать его для компиляции CoffeeScript, Eco, HAML, IcedCoffeeScript, Jade, LESS, Compass, Slim и Stylus.

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

Изменения, сделанные с помощью инструментов разработчика, также обновляются в вашем редакторе. Вам даже не нужно сохранять файлы. Смотреть это и удивляться.

К сожалению, LiveStyle работает только с ванильным CSS (без SASS и т. П.) И поддерживает только Google Chrome, Safari и Sublime Text (с появлением новых браузеров и редакторов). Но это бесплатно (пока).


Плагин LiveStyle.

Как вы можете видеть, есть несколько способов окончательно дать ключу перезагрузки вашего браузера. Поначалу настройка LiveReload может показаться пугающей, но как только все запустится, вы не будете оглядываться назад. Это всего лишь небольшой инструмент, но он значительно повысит вашу производительность.

Используем Live Reload без проблем

Есть такое понятие «Live Reload» — это автоматическое обновление страницы в браузере, когда изменился составляющий её css-файл (html, js и т.д.). На практике это выглядит так: вебмастер внес изменения в css-файле, сохранил, браузер автоматом обновил страницу. То есть если по простому, то не нужно каждый раз нажимать кнопку «Обновить страницу» в браузере.

Чтобы реализовать Live Reload для своих задач потребуется совсем немного.

Занявшись этим вопросом, я решил убить сразу несколько зайцев. Проанализировав свою работу, я выстроил типовую последовательность действий:

  • внесение изменений в исходный код
  • сохранение (Ctrl+S)
  • переключение на окно браузера
  • обновление страницы (F5)
  • переключение обратно и повтор
Обычно я работаю с двумя мониторами, поэтому переключение Редактор-Браузер не скрывают друг-друга.

Первое, что я решил сделать — избавиться от постоянного Ctrl+S. В Notepad++ (самый лучший редактор для вебмастера) достаточно установить плагин AutoSave. Идём в Плагины — Plugin Manager — Show Plugin Manager, отмечаем AutoSave и жмём Install.

Если по какой-то неведомой причине плагин не удалось автоматически установить, то можно его скачать вручную с общей страницы плагинов NPP.

После перезагрузки редактора в Плагинах появится пункт «Auto Save», где можно его настроить:

Главное выставить опцию «loses focus», поскольку она будет ключевой в Live Reload.

Итак, первая задача — избавиться от постоянного Ctrl+S — выполнена.

Для второй части нам потребуется установить расширение для FireFox «AutoReload». В настройках расширения следует отметить «Enabled». Остальные опции на своё усмотрение.

Для удобства работы, кнопку AutoReload лучше вынести в верхнюю панель браузера.

Теперь следует указать AutoReload какие файлы нужно отслеживать. Можно указать как конкретные файлы (Watch Files…) либо указать каталог (Watch Directory…) где находятся отслеживаемые файлы.

Важный момент — указывать отслеживаемые файлы нужно на открытой странице, той которая будет автообновляться. То есть открываем страницу, выбираем каталог, AutoReload автоматом найдет все файлы и жмём OK.

Собственно, это всё. Теперь работа сводится к двум пунктам:

  • правка кода
  • переключение на браузер

Если у вас один монитор, то иногда будет удобным одновременно видеть и страницу и исходный код. В Notepad++ этот вопрос решается очень просто. Нужно лишь выставить режим «Поверх всех окон», что позволит избежать скрытия окна редактора, а пункт меню «Только текст (во всё окно)» оставит только текст, без панелей. Для удобства можно назначить этим пунктам горячие клавиши, тогда переключение будет мгновенным.

Из минусов AutoReload отмечу только то, что он отслеживает файлы, указанные в момент добавления. Если появился новый файл, то он его уже не видит. Решается это достаточно просто — добавляем файлы ещё раз.

В целом отмечу, что метод годится для самых разных задач вебмастера. Я его оттестировал на CSS/JS/HTML/PHP файлах — работает без проблем. 🙂

Сайту 8 лет!

Адаптивная сетка. Верстка по-новому

Issues · livereload/livereload-extensions · GitHub

Новый выпуск

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

Зарегистрируйтесь на GitHub

Нажимая «Зарегистрироваться на GitHub», вы соглашаетесь с нашими условиями обслуживания и Заявление о конфиденциальности. Время от времени мы будем отправлять вам электронные письма, связанные с учетной записью.

Уже на GitHub? Войти на ваш счет

Ошибка протокола LiveReload (недопустимая команда «hello», допустимы только команды: reload, alert)) после получения данных:

#55 открыт 4 августа 2021 г. автором sl-AsA

Сайт действительно устарел

#54 открыт 29 августа 2020 г. автором chexmo

Safari 12 не загрузит это расширение

#52 открыт 18 сентября 2018 г. автором csuhta

Несовместимо с Firefox Quantum

#50 открыт 29 ноября, 2017 г. GCorbel

Поддержка WebExtensions расширения Firefox

#47 открыт 8 сентября 2017 г. автором mitsugu

Сделать host:port настраиваемым в расширении

#46 открыт 11 января 2017 г. автором севасева

Этот проект мертв?

#43 открыт 15 апреля 2016 г. автором rlam3

Указать лицензию внутри исходного кода?

#42 открыт 22 декабря 2015 г. автором Иван-Колмычек

Трудно различать состояния включения и выключения в Chrome

#40 открыт 2 сентября 2015 г. автором droom

Firefox Developer Edition отключение неподписанных расширений

#39 открыт 10 августа 2015 г. автором markabbott

Firefox Developer Edition «Вы используете старую несовместимую версию инструмента командной строки…»

#38 открыт 2 августа 2015 г. автором zachwills

Не обнаруживает сервер livereload в Firefox с включенной поддержкой нескольких процессов

#36 открыт 20 мая 2015 г. автором telekid

Неправильная перезагрузка LESS

#31 открыт 10 сентября 2014 г. автором dangreen

Более четкая обратная связь, если плагин работает или нет (Chrome)

#30 открыт 28 августа 2014 г. автором seriema

Дублированная кнопка Firefox Australis

#28 открыт 30 апреля 2014 г. автором aeris

Chrome 34 не отражает изменения CSS, пока курсор не наведется на область просмотра

#26 открыт 16 апреля 2014 г. автором jacksleight

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

#25 открыт 10 ноября 2013 г. автором nfroidure

[Запрос функции] Улучшенные значки

#20 открыт 9 июня 2013 г. автором vinayraghu

CSS Не применяется, пока я не обновлю страницу

#19 открыт 1 апреля 2013 г. автором jcldavid

Chrome + Drupal: работает с перебоями (недостаточная задержка?)

#18 открыт 22 марта 2013 г. автором wizonesolutions

Firefox — не удается переместить кнопку панели инструментов

# 17 открыт 20 марта 2013 г. автором alexcroox

Chrome: использовать текущий домен в качестве хоста

#15 открыт 25 февраля 2013 г. автором jgallen23

Предоставление контекстного меню в браузерах

#14 открыт 10 декабря 2012 г. автором tobiastom

Не удалось подключиться к серверу LiveReload

#12 открыт 28 сентября 2012 г. автором villimagg

Перезагрузка страницы после обновления файлов LESS с расширением Chrome

#9 открыт 5 августа 2012 г.

автором fero8

Совет! Обновлено за последние три дня: обновлено:>2023-06-03.

Майкл Хённиг — LiveReload в Chrome и Firefox с SpringBoot и IntelliJ IDEA

Работаете над веб-приложением с помощью SpringBoot и хотите, чтобы ваши изменения, сделанные в IntelliJ IDEA, сразу же отображались в браузере? Тогда это для вас:

Совет по безопасности

Прежде чем устанавливать следующие плагины в свой браузер, имейте в виду, что они могут отслеживать вашу активность в браузере. Чтобы снизить риск, я предлагаю вам использовать отдельную учетную запись/профиль операционной системы для критических и некритических задач и устанавливать такие плагины только в браузерах некритической учетной записи/профиля.

Установка плагина LiveReview в Firefox

  1. Откройте страницу настроек плагина в браузере Firefox.
  2. Введите «livereload» в поле поиска в правом верхнем углу.
  3. Выберите и установите плагин «LiveReload 20. 2.1″ (*) — см. скриншот.
    Это версия LiveReload, основанная на веб-расширении . Поддерживает Firefox 57 (Firefox Quantum) от Тодда Вольфсона.
  4. Активировать плагин.
    Теперь вы видите значок, который выглядит как круг, состоящий из двух стрелок вокруг маленького круга на панели инструментов Firefox — см. снимок экрана.
  5. Чтобы активировать функцию перезагрузки в реальном времени, щелкните значок для подключения.
    При подключении он должен изменить цвет с черного на синий, но если нет, также наведите указатель мыши на значок, чтобы увидеть его состояние.
(* На момент написания этой статьи я использую 64-битную версию Firefox Quantum 58.0.2 на Ubuntu Linux 17.10), если вы используете другую версию или получаете более новые версии плагинов, детали могут отличаться.)

Установка подключаемого модуля LiveRewiew в Google Chrome

  1. Откройте Интернет-магазин Google Chrome в браузере Chrome.
  2. Введите «lifereload» в поле поиска в левом верхнем углу.
  3. Добавьте плагин «LiveReaload», предоставленный livereload.com — см. снимок экрана.
  4. Чтобы активировать функцию перезагрузки в реальном времени, щелкните значок для подключения.
    В моем браузере Chrome он не становится синим при подключении, но также можно навести указатель мыши на значок, чтобы увидеть его статус.

Добавьте

spring-boot-devtools Зависимость Для Maven добавьте эту зависимость в свой pom.xml (учитывая, что parent-pom фактически spring-boot-starter-parent с правильным номером версии). 
<зависимость>
    org.springframework.boot
    spring-boot-devtools
    <область>среда выполнения
Для Gradle, также учитывая, что у вас есть конфигурация spring-boot-starter, добавьте такую ​​​​зависимость: 
зависимости {
скомпилировать («org.springframework.boot: spring-boot-devtools»)
}
В любом случае повторно импортируйте свою конфигурацию зависимостей в IntelliJ IDEA (если автоматический импорт все равно не активирован).

Включить автоматическое восстановление в IntelliJ IDEA

После того, как вы внесли и изменили свой исходный код, вам обычно нужно запустить «Build Project», чтобы перестроить ваш код и перезапустить SpringBoot. Но в «Файл/Настройки/Компилятор» можно активировать «Автоматическая сборка проекта» — см. скриншот: ⚠ Предыдущий шаг необходимо повторить для каждого проекта IntelliJ IDEA! К сожалению, как видно из подсказки этого параметра, он не работает во время работы приложения. Однако мы можем изменить это в реестре IntelliJ IDEA. Откройте всплывающее окно «Действие» (Windows и Linux: «Ctrl-Shift-A»), введите «Реестр» и выберите соответствующую запись — см. снимок экрана: Затем активируйте «compiler.automake.allow.when.app.running» и нажмите кнопку «закрыть». Однако будьте осторожны с другими параметрами в реестре!

См. LiveReload на работе

Наконец, запустите веб-проект SpringBoot и откройте его в браузере. Затем измените что-нибудь в исходном коде, будь то Java, HTML или что-то еще. Теперь сборка должна запускаться автоматически, SpringBoot перезагружает файлы и ресурсы вашего приложения, и вскоре после этого браузер также перезагружается и отражает изменения. Если не работает, попробуйте перезагрузить IntelliJ IDEA — в некоторых случаях это казалось необходимым. Также может потребоваться одна начальная ручная перезагрузка вашего приложения в браузере, если конфигурация еще не была активна при первоначальной загрузке.

Как это работает в SpringBoot

Весь оборот обычно занимает всего несколько секунд, учитывая, что само приложение достаточно маленькое. Как это может быть быстрее, чем запуск SpringBoot с вашим приложением? SpringBoot применяет хороший трюк, у него есть один ClassLoader для внешних библиотек (включая SpringBoot, SpringFramework и т. д.) и один для классов и ресурсов ваших приложений; и он перезагружает только второй ClassLoader для живой перезагрузки.

Подтверждение

Спасибо Джону Томпсону за его отличный видеокурс Spring Framework 5: Beginner to Guru, где он объясняет этот трюк с перезагрузкой в ​​реальном времени.

No related posts.