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, а также с 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 г.
Майкл Хённиг — LiveReload в Chrome и Firefox с SpringBoot и IntelliJ IDEA
Работаете над веб-приложением с помощью SpringBoot и хотите, чтобы ваши изменения, сделанные в IntelliJ IDEA, сразу же отображались в браузере? Тогда это для вас:Совет по безопасности
Прежде чем устанавливать следующие плагины в свой браузер, имейте в виду, что они могут отслеживать вашу активность в браузере. Чтобы снизить риск, я предлагаю вам использовать отдельную учетную запись/профиль операционной системы для критических и некритических задач и устанавливать такие плагины только в браузерах некритической учетной записи/профиля.Установка плагина LiveReview в Firefox
- Откройте страницу настроек плагина в браузере Firefox.
- Введите «livereload» в поле поиска в правом верхнем углу.
- Выберите и установите плагин «LiveReload 20. 2.1″ (*) — см. скриншот.
Это версия LiveReload, основанная на веб-расширении . Поддерживает Firefox 57 (Firefox Quantum) от Тодда Вольфсона. - Активировать плагин.
Теперь вы видите значок, который выглядит как круг, состоящий из двух стрелок вокруг маленького круга на панели инструментов Firefox — см. снимок экрана. - Чтобы активировать функцию перезагрузки в реальном времени, щелкните значок для подключения.
Установка подключаемого модуля LiveRewiew в Google Chrome
- Откройте Интернет-магазин Google Chrome в браузере Chrome.
- Введите «lifereload» в поле поиска в левом верхнем углу.
- Добавьте плагин «LiveReaload», предоставленный livereload.com — см. снимок экрана.
- Чтобы активировать функцию перезагрузки в реальном времени, щелкните значок для подключения.
В моем браузере 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 (если автоматический импорт все равно не активирован).