MaxSite.org 11 лет
Блог вебмастера о сайтостроении
Внимание! Данная запись отмечена как устаревшая и может содержать неточную или неактуальную информацию!

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

СофтПросмотров: 20935 (466)

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

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

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

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

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

Установка AutoSave в Notepad++

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

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

Настройки автосохранение

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

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

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

Настройка AutoReload

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

Кнопка на панели браузера

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

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

Добавление файлов в AutoReload

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

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

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

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

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

Комментариев: 4 RSS

1Руслан14-11-2013 10:11

Подскажите пожалуйста как в Notepad++ настроить автоподсказку тегов HTML?

3Аноним14-11-2013 11:15

например набираю "ma" высвечивается окошко в котором разные варианты тегов или стилей и я могу выбрать один из них , например "margin-top"

4MAX14-11-2013 11:34

Подсказка, насколько я понял, стандартная опция Автозавершения.

Для ускорения набора используйте Emmet, Finger Text, Snippets, SnipetPlus и куча других на свой выбор.

Оставьте комментарий!

Комментарий будет опубликован после проверки. Вы соглашаетесь с правилами сайта.

(обязательно)

О сайте

Здесь вы получите самую полную информацию о создании сайтов на MaxSite CMS.