• Шаблоны для вашего сайта
  • Сделать сайт
  • Реклама
  • Berry CSS
  • Albireo Framework
  • Бесплатный HTML-курс
  • Telegram-канал
  • Обратная связь
MaxSite.org
О создании сайтов и не только
Создание сайтов под ключ (Украина) →
Вход
×
или зарегистрироваться

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

СофтПросмотров: 33131Комментарии: 413 ноября 2013 г.

Есть такое понятие «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 файлах — работает без проблем. :-)


Создание сайтов (Украина) →
Сайту 8 лет!
Адаптивная сетка. Верстка по-новому
twitter.com facebook.com
Другие записи сайта
Почему Яндекс идёт против вебмастеров или как вебмастеру выжить в кризис
Почему Яндекс идёт против вебмастеров или как вебмастеру выжить в кризис
Как использовать функцию mail() в PHP
Как использовать функцию mail() в PHP
Попробовал Linux
Попробовал Linux
Пример создания универсального LESS-микса для табов (вкладок)
Пример создания универсального LESS-микса для табов (вкладок)
Простой шаблон в MaxSite CMS
Простой шаблон в MaxSite CMS
Фрилансер-робот или советы ни о чем и ни для кого
Фрилансер-робот или советы ни о чем и ни для кого

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

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

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

2MAX14-11-2013 09:59

Как это?

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

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

4MAX14-11-2013 10:34

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

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

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

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

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

Навигация
  • Шаблоны для MaxSite CMS 22
  • jQuery и JavaScript 6
  • Java и Android 5
  • PHP/ООП 25
  • SQL 17
  • Albireo Framework 11
  • Berry CSS 7
  • CSS, HTML, LESS, SASS 23
  • PHP 37
  • Тайм-менеджмент 9
  • Софт 37
  • SEO 13
  • Git. GitHub 3
  • CodeIgniter 5
  • Landing Page 3
  • Alpine.js 14
  • Фильмы 2
  • Дневник 55

Здесь можно заказать создание сайта (только Украина), шаблона или лендинга. Также вы можете выбрать готовые шаблоны для MaxSite CMS по небольшой цене. Также можно купить отдельные модули, компоненты для вашего сайта.

MaxSite.org
Как создать свой сайт

Услуги по созданию сайтов, блогов, лендингов
Обратная связь • Реклама на сайте
Карта сайта
Мои проекты
  • Шаблоны для вашего сайта
  • Заказать создание сайта
  • MaxSite CMS
  • Berry CSS (CSS Utilities)
  • Albireo Framework
  • UniCSS (Universal Atomic CSS)
  • Landing Page Framework
  • Бесплатные НТML-курсы
Ссылки
  • Telegram-канал
  • Github
  • Twitter
  • Telegram-бот
  • RSS
© MaxSite.org, 2006-2022. Работает на MaxSite CMS | Время: 0.2668 | SQL: 20 | Память: 4.61MB | Вход