Livereload: Web extension – Загрузите это расширение для 🦊 Firefox (ru)

Метод сценария работает с приложением 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 лет!

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

Живая перезагрузка | Ionic Documentation

Одним из вариантов, который может повысить производительность при создании приложений Ionic, является Live Reload (или live-reload ). Когда функция Live Reload активна, она перезагружает браузер или веб-представление при обнаружении изменений в приложении. Это особенно полезно для разработки с использованием аппаратных устройств.

Live Reload — это объединенный термин. С ionic serve Live Reload просто означает перезагрузку браузера при внесении изменений. Live Reload также можно использовать с Capacitor и Cordova, чтобы обеспечить одинаковый опыт работы на виртуальных и аппаратных устройствах, что устраняет необходимость повторного развертывания собственного двоичного файла.

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

Как и при обычном развертывании устройства, вам потребуется кабель для подключения устройства к компьютеру. Разница в том, что Ionic CLI настраивает веб-представление для загрузки вашего приложения с сервера разработки на вашем компьютере.

Capacitor

Capacitor еще не имеет программной сборки для разработки (отслеживайте ход выполнения этой проблемы), поэтому Ionic CLI делает , а не автоматически перенаправляет порты для iOS и Android.

Чтобы использовать Live Reload с конденсатором, убедитесь, что вы используете виртуальное устройство или аппаратное устройство, подключенное к той же сети Wi-Fi, что и ваш компьютер. Затем вам нужно указать, что вы хотите использовать внешний адрес для сервера разработки, используя флаг --external .

 $ ионный конденсатор запустить ios -l --external 
 $ ионный конденсатор запустить android -l --external 
 

Помните, с --внешний вариант , другие пользователи вашей сети Wi-Fi смогут получить доступ к вашему приложению.

Cordova

Android

Для устройств Android Ionic CLI автоматически переадресует порт сервера разработки. Это означает, что вы можете использовать адрес localhost , и он будет относиться к вашему компьютеру при загрузке в веб-представлении, а не к устройству.

Следующая универсальная команда запустит сервер live-reload на localhost и развернет приложение на устройстве Android с помощью Cordova:

 ionic cordova run android -l 
 

iOS​

Для устройств iOS переадресация портов пока недоступна. Это означает, что вам нужно будет подключить свое устройство к той же сети Wi-Fi, что и ваш компьютер, и использовать внешний адрес для сервера разработки.

Вы можете отслеживать ход выполнения этой проблемы по переадресации портов iOS с помощью Ionic.

В некоторых случаях интерфейс командной строки Ionic не знает адрес для настройки веб-представления, поэтому вам может быть предложено выбрать его. Обязательно выберите адрес вашего компьютера в сети Wi-Fi.

Следующая универсальная команда запустит сервер live-reload на всех адресах и развернет приложение на устройстве iOS с помощью Cordova:

 ionic cordova run ios -l --external 
 

Помните, с вариант --external , другие пользователи вашей сети Wi-Fi смогут получить доступ к вашему приложению.

• В Cordova используйте параметры --device , --emulator и --target , чтобы сузить список целевых устройств. Используйте --list опция для отображения всех целей. См. использование в документации команды.
• Вы можете разделить процесс сервера разработки и процесс развертывания, используя ionic serve и параметр --livereload-url для ionic cordova run или ionic конденсатора run .
• Для Android можно настроить adb для постоянной переадресации портов во время работы сервера adb (см. adb reverse ). После настройки переадресации портов внешний адрес больше не потребуется. Вы также можете настроить мост adb через TCP, чтобы для последующих развертываний больше не требовался USB-кабель.

livereload · PyPI

Это совершенно новый LiveReload версии 2.0.0.

Скачать на PyPi

Установка

Python LiveReload предназначен для веб-разработчиков, знающих Python.

Установите Python LiveReload с помощью pip:

 $ pip установить livereload 

Если у вас не установлен pip, попробуйте easy_install:

 $ easy_install livereload 

Интерфейс командной строки

Python LiveReload предоставляет утилиту командной строки livereload для запуска сервера в каталоге.

По умолчанию он будет прослушивать порт 35729, общий порт для расширений браузера LiveReload.

 $ livereload --help
использование: livereload [-h] [-p ПОРТ] [-w WAIT] [каталог]
Запустите сервер `livereload`
позиционные аргументы:
  каталог Каталог для отслеживания изменений
необязательные аргументы:
  -h, --help показать это справочное сообщение и выйти
  -p ПОРТ, --port ПОРТ Порт для запуска сервера `livereload`
  -w WAIT, --wait WAIT Задержка перед перезагрузкой 

Старые версии Python LiveReload использовали Guardfile для описания необязательных дополнительных правил для файлов, которые нужно отслеживать, и создавать команды для запуска при изменениях.

Пример скрипта: Сфинкс

Вот простой пример скрипта, который перестраивает документацию Sphinx:

 #!/usr/bin/env Python
с сервера импорта livereload, оболочки
сервер = сервер()
server.watch('docs/*.rst', shell('сделать html', cwd='docs'))
server.serve(root='docs/_build/html') 

Запустите его, затем откройте http://localhost:5500/, и вы сможете увидеть изменения в документации в режиме реального времени.

Руководство разработчика

Новый сервер livereload предназначен для разработчиков. Он может питать приложение wsgi сейчас:

 с сервера импорта livereload, оболочка
сервер = сервер (wsgi_app)
# запустить команду оболочки
server. watch('static/*.stylus', 'сделать статическим')
# запустить функцию
Оповещение о защите():
    распечатать('фу')
server.watch('foo.txt', предупреждение)
# вывод stdout в файл
server.watch('style.less', оболочка('lessc style.less', output='style.css'))
сервер.serve() 

Класс сервера принимает параметры:

сервер.часы

server.watch может отслеживать путь к файлу, каталог и шаблон глобуса:

 server.watch('путь/к/файлу.txt')
server.watch('каталог/путь/')
server.watch('glob/*.pattern') 

Вы также можете использовать другую библиотеку (например, formic) для более мощного добавление файла:

 для пути к файлу в formic.FileSet(include="**.css"):
    server.watch (путь к файлу, «сделать css») 

Вы можете отложить отправку сигнала перезагрузки на несколько секунд:

 # задержка 2 секунды на перезагрузку
server.watch('путь/к/файлу', задержка=2) 

сервер.serve

Настройте сервер с помощью метода server. serve. Он может создать статический сервер и сервер livereload:

 # использовать настройки по умолчанию
сервер.serve()
# livereload на другом порту
server.serve(liveport=35729)
# использовать пользовательский хост и порт
server.serve(порт=8080, хост='localhost')
# открыть веб-браузер при запуске на основе переменной окружения $BROWSER
server.serve(open_url_delay=5, отладка=ложь)
# установить пользовательский файл по умолчанию для открытия
server.serve(default_filename='example.html') 

корпус

Мощная функция оболочки поможет вам выполнять команды оболочки. Ты можно использовать с server.watch:

 # вы можете перенаправить вывод команды в файл
server.watch('style.less', оболочка('lessc style.less', output='style.css'))
# команды могут быть списком
server.watch('style.less', shell(['lessc', 'style.less'], output='style.css'))
# работа с Makefile
server.watch('assets/*.styl', shell('создать активы', cwd='assets')) 

Интеграция фреймворков

Livereload может без проблем работать с вашим любимым фреймворком.