Установка и настройка livereload

Установка LiveReload в Sublime Text 2

February 12, 2013

В предыдущей статье, посвященной вопросу автообновления страниц в окне браузера, я упоминал об плагине для редактора Sublime Text 2 под названием LiveReload. Сегодня я вернусь к этому вопросу и выполню установку этого плагина. Она проста — там нет ничего сложного.

Итак, приступаем к установке и настройке LiveReload в Sublime Text 2.

Первое, что необходимо сделать, это установить менеджер пакетов в редакторе. Установка пакетов в Sublime Text может выполняться двумя способами — вручную или же автоматически. Последний способ более простой и удобный, поэтому воспользуюсь им.

Установка менеджера пакетов

Открываем Sublime Text и переходим в меню по пути “View — Show Console” или же нажимаем сочетание клавиш , затем копируем и вставляем нижеприведенный код в окно консоли:

Жмем Enter и затем закрываем и снова открываем Sublime Text, чтобы изменения вступили в силу. Менеджер пакетов установлен.

Установка LiveReload

Переходим к установке плагина LiveReload в Sublime Text 2. Переходим в меню по пути “Preferences — Package Control”:

В менеджере пакетов выбираем из списка пункт “Package Control: Install Package”:

Немного подождем, пока загрузится список пакетов. Затем в окне поиска введем имя пакета — “LiveReload”:

Жмем Enter kbd> — пара секунд и плагин установлен. Снова перезагружаем редактор, чтобы изменения вступили в силу:

Установка расширения LiveReload в Chrome

Плагин LiveReload работает совместно с одноименным расширением, которое устанавливается в браузер. В моем случае это будет Google Chrome. Приступаю к установке.

В настройках Chrome перехожу в раздел с расширениями и ввожу в строку поиска имя плагина — “LiveReload”:

Соглашаюсь со всем и жму кнопочку “Установить”. Перезагрузки браузера не требуется — в панели инструментов сразу появляется значок расширения в виде двух круговых стрелочек.

Установка расширения произведена.

Тестирование плагина LiveReload

Открываю в Sublime Text 2 редактируемый HTML-файл. И открываю его же в браузере Google Chrome. Нажимаю мышью на значок расширения LiveReload в панели инструментов и вижу в строке статуса следующее:

Это говорит о том, что плагин в редакторе Sublime Text 2 успешно подключился к плагину LiveReload в браузере. Можно приступать к работе. Изменяю код в файле, сохраняю изменения и вижу, как они автоматически применились в окне Chrome.

Заключение

Применение плагина LiveReload мне кажется более удобным, нежели расширения, рассмотренные в предыдущей статье. Хотя бы тем, что изменения автоматически вступают в силу, не нужно ждать даже 1 секунды. Главное, не забыть нажать сочетание клавиш Ctrl + S . Вот если бы и этого не нужно было делать, было бы совсем замечательно!.

Angular — именованные outlets

Для меня немного запутанная картина с именованными областями отображения и главное — с правильной настройкой. Нужно немного прояснить для. … Continue reading

источник

Как заставить работать LiveReload + Sublime Text 3 в Chrome?

1.устанавливаете плагин LiveReload в chrome
2. устанавливаете LiveReload в Sublime Text 3
3. в Sublime Text 3 заходите в Preferences > Package Settings > LiveReload > Setting — User
4. пишете

5. нажимаете на значок плагина в chrome он подключается к Sublime Text 3.
6. пользуетесь!

Как установить Livereloat (автоматический релоад html страницы проекта)

1. Устанавливаем программу Livereload для windows с livereload.com

2. Устанавливаем плагин в Chrome https://goo.gl/6Te9My

3. Удаляем плагин Livereload из Sublime если он есть (блокирует нужные порты).

4. Открываем программу windows livereload, выбираем папку с проектом, клацаем мышкой по появившемуся названию папки в прямоугольнике и вставляем полученный код в файл html который будет обновляться. Все. После сохранения файла скрипта результаты тут же появятся. Если все равно не работает, то нажать f5.

У плагина в Chrome есть одна особенность. которую я не понял. Если кликнуть по иконке livereload находясь на обычном сайте, то окружность по середине иконки станет наполненной и всплывающее окно при наведении покажет disable LiveReaload (отключить LiveReload). А если кликнуть эту же иконку находясь на странице проекта (на компьютере), то не происходит ничего, хотя сам LiveReload для этой конкретной страницы будет работать.

В Sublime Text 3 заходите в Preferences > Package Settings > LiveReload > Setting — User

<
«enabled_plugins»: [
«SimpleReloadPlugin»,
«SimpleRefresh»
]
>

P.S. Setting — User, не Setting — Default

Запарил меня этот livereload.
Вот мое решение, вчера написал:

var lastnumber = »;
setInterval(«docReload()», 100);

function docReload() <
$.ajax( <
type:’post’,
url: ‘livereload.php’,
success:function (data) <
if(lastnumber != ») <
if(data != lastnumber) <
location.reload();
>
>
else <
lastnumber = data;
>
>
>);
>

2. Скрипт php (livereload.php):

$homepage = file_get_contents(‘index.html’);
echo $homepage;

Мучения с LiveReload Взято на

После нескольких часов изучения понятия LiveReload, попыток подружить его с SublimeText3 и штудирования разных методик устранения проблем выработал следующий алгоритм (Работает на Хроме и Опере):

Ставим плагин LiveReload в SublimeText:
— Ctrl+Shift+P
— Вводим в окошке «Install Package»
— Вводим LiveReload. Устанавливаем плагин.
— Заходим в настройки Default и User плагина: Preferences — Package Settings — LiveReload — Settings Defaiult и Settings User.
— Пишем там
<«enabled_plugins»: [«SimpleReloadPlugin», «SimpleRefresh» ]>
Скачиваем программу LiveReload download.livereload.com/windows/LiveReloadSetup.exe
Устанавливаем на компьютер. Запускаем.
Жмем кнопку +add.
Находим на жестком диске папку сайта с которым работаете в SublimeText. Выделяете её и жмете «Выбор папки».
Жмете на появившемся названии папки и во втором окошке копируете текст похожий на этот

Закрываем программу LiveReload и запускаем SublimeText.
Вставляем скопированный текст в тег в самом верху.
Запускаем либо перезагружаем страницу в браузере.
Делимся мнением

источник

LiveReload на Node.js

Что это такое?

LiveReload — это утилита, которая позволяет автоматически перезагружать страницу в браузере при изменение её кода и ресурсов(html, css, js, images, etc) на сервере. Кроме того LiveReload позволяет применять изменения в CSS и JavaScript без перезагрузки страницы.

Зачем это нужно?

The Web Developer Wonderland (a happy land where browsers don’t need a Refresh button)

Как это работает?

Принцип очень прост, утилита состоит из сервера и клиента:

1. Cервер: WebSocket который мониторит изменения в заданных файлах и если такие изменения обнаружены — уведомляет клиента
2. Клиент, есть несколько вариантов:
   • Дополнение для браузера которое обновляет страницу.
   • JavaScript сниппет, который слушает WebSocket сервер и при необходимости обновляет страницу. Его необходимо вставить в свои HTML файлы.

Node.js, huh?

Если Вы уже используете Node.js или Grunt.js, или хотите чтобы один метод LiveReload’а работал на всех платформах без изменений(LiveReload можно настроить и на Windows и на Linux и на MacOS X, но метод настройки везде разный) то можно использовать grunt-reload.
Итак, вот что понадобиться:

Node.js. На Убунте к примеру ставим так:

Плагин grunt-reload кроме двух уже указанных способов livereload’a имеет еще пару вариантов:

1. Proxy: создает сервер, который будет проксировать запросы к dev. серверу добавляя к HTML файлам livereload сниппет. Избавляет от необходимости вручную обновлять html’ки для поддержки livereload.
2. iFrame: идентичен предыдущему методу, только вместо автоматического добавления сниппета, открывает страницы в iFrame, который перезагружает их при необходимости. И ваши html’ки останутся чистыми!;)

К сожалению, grunt-reload не поддерживает применение CSS и JS без перезагрузки всей страницы. Точнее поддерживает, но только с использованием LiveReload browser extension.

Как использовать

Создаем проект, в корне создаем grunt.js и в нем настраиваем задачу watch(она будет мониторить изменения в файлах) и задачу reload(при изменении файлов делаем livereload).

Например, имеем такой express.js проект:
/public — статика(CSS, images, JS, templates, etc)
app.js — express.js application
grunt.js — Gruntfile

Теперь из корневого каталога приложения можно запустить команду

И получить автоматически перезапускаемый сервер и LiveReload на клиенте по адресу localhost:6001

Данный Gruntfile так-же использует пакет supervisor(для мониторинга сервера), и пакет grunt-bg-shell для запуска супервизора в бэкграунде

источник

Удобная среда для HTML верски [sublime, emmet, livereload]

Сегодня хочу покзать вам, как можно настроить пожалуй лучшее решение для верстальщиков, в Ubuntu. Точнее не решение — а в какой то степени комплекс ПО состоящий из редактора Sublime, дополнения к нему — emmet, позволяющее многократно ускорить ввод html тегов, расширения для браузера и программы которые будут обновлять страницу автоматически при каждом сохранении файла css или html — LiveReload.

Для начала установим редактор sublime:

Идем в tools — install package control

После чего — tools — command pallette…

Тут набираем или находим package control: install package

в новом открышемся окне находим emmet и жмем по нему.

Ждем пока скачается дополнение и перезапускаем sublime.

Для проверки работоспособности emmet создаем файл с рашриение html набираем ! И жмем клавишу tab. Должен будет подставится шаблон.

Теперь займемся установкой LiveReload, что бы сохраненные изменения в наших файлах отображались автоматически, без каких либо действий в браузере. Покажу на примере браузера Chrome.

Устанавливаем расширение ]]> LiveReload ]]> и идем в ]]> менеджер расширений. ]]> Находим установленное расширение и ставим галочку Разрешить открывать локальные файлы.

После чего нам нужно установить guard-livereload:

Идем в папку, где распологается наш проект и выполняем команду:

В текущей папке будет создан файл с именемм Guardfile, отредактируем в нем строчку:

В итоге сточка должна быть такая:

guard ‘livereload’ do
extensions = <
css: :css,
scss: :css,
sass: :css,
js: :js,
coffee: :js,
html: :html,
png: :png,
gif: :gif,
jpg: :jpg,
jpeg: :jpeg,
# less: :less, # uncomment if you want LESS stylesheets done in browser
>

rails_view_exts = %w(erb haml slim)

# file types LiveReload may optimize refresh for
compiled_exts = extensions.values.uniq
watch(%r<.+\.(#)>)

extensions.each do |ext, type|
watch(%r <
(?:app|vendor)
(?:/assets/\w+/(?

[^.]+) # path+base without extension
(? \.#)) # matching extension (must be first encountered)
(?:\.\w+|$) # other extensions
>x) do |m|
path = m[1]
«/assets/#.#»
end
end

Теперь запускаем «мониторинг»:

Осталось только нажать на кнопку LiveReload в браузере на открытой вкладке с редактируемой страницей.

В консоли будет выведена инофрмация, что браузер подключен.

Теперь при каждом сохранении файлов в папке, страница будет обновляться автоматически.

И последняя в этой заметке возможность, о которой хочу рассказать, которая так же заметно упрощает жизнь — возможность автосохрания в sublime.

Для включения этой возможности идем в tools-command pallete, вводим install, выбираем package control: install package.

В новом окне набираем Auto Save и устанавливаем одноименное расширенние.

После его установки идем в prefferences — key bindings, и в окне user добавляем строчку:

Соответсвенно ctrl+shift+s можно заменить на любую другую комбинацию клавиш. Она используется для включения автосохранения, которое по умолчанию выключено.

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

Для ОС Windows — все вышесказанное будет отличаться незначительно, только установкой sublime и клиенсткой программы LiveReload. Соответсвенно sublime можно ]]> скачать тут ]]> , а LiveReload — ]]> тут ]]> , в секции Downloads.

источник

Установка и настройка livereload

GitHub is home to over 40 million developers working together to host and review code, manage projects, and build software together.

Clone with HTTPS

Use Git or checkout with SVN using the web URL.

Downloading

Want to be notified of new releases in livereload/livereload-js ?

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching Xcode

If nothing happens, download Xcode and try again.

Launching Visual Studio

Latest commit

Files

.github/ workflows add CI action that runs tests ( closes #68) Dec 28, 2019

dist 3.2.2 Mar 14, 2020

src add basic test for #84 Dec 28, 2019

test add basic test for #84 Dec 28, 2019

.babelrc update deps Mar 22, 2019

.eslintrc.json replace coffeescript by plain js Dec 8, 2018

.gitignore exclude files from npm and git Dec 8, 2018

.npmignore exclude bower version script from release Dec 8, 2018

LICENSE Add MIT LICENSE file and refer from README.md to make licensing match… Jan 17, 2013

README.md move version history to github releases Dec 27, 2019

bower.json 3.2.2 Mar 14, 2020

package-lock.json 3.2.2 Mar 14, 2020

package.json 3.2.2 Mar 14, 2020

version-bower.js replace coffeescript by plain js Dec 8, 2018

LiveReload is a tool for web developers and designers. See livereload.com for more info.

To use LiveReload, you need a client (this script) in your browser and a server running on your development machine.

This repository (livereload.js) implements the client side of the protocol. The client connects to a LiveReload server via web sockets and listens for incoming change notifications. When a CSS or an image file is modified, it is live-refreshed without reloading the page. When any other file is modified, the page is reloaded.

The server notifies the client whenever a change is made. Available servers are:

If you are a web developer looking to use LiveReload, you should refer to your LiveReload server/app/tool’s documentation, rather that this repository. You should use the copy of livereload.js script bundled with your server, because it’s guaranteed to be compatible, and may be customized for that server.

Most LiveReload server vendors will serve livereload.js on the LiveReload port. When your server is running, you can typically access the script at http://0.0.0.0:35729/livereload.js .

Please read on only if you are:

• using a server that doesn’t document the usage of livereload.js
• interested in hacking on livereload.js or want to understand it better
• developing a LiveReload server

This repository contains a JavaScript file implementing the client side of the LiveReload protocol. It gets change notifications from a LiveReload server and applies them to the browser.

If you are developing a LiveReload server, see dist/livereload.js for the latest version built using the sources in this repository. We require LiveReload server vendors to distribute livereload.js as part of their apps or tools.

An old version of this script is also bundled with the LiveReload browser extensions, but it’s not getting updated and only serves for compatibility with very old clients.

• Live CSS reloading
• Full page reloading
• Protocol, WebSocket communication
• CSS @import support
• Live image reloading ( , background-image and border-image properties, both inline and in stylesheets)
• Live, in-browser LESS.js reloading

Would love, but doesn’t seem possible:

This script is published on Bower. (But, to reiterate: the preferred method is to avoid installing it altogether, and instead use the one bundled with your LiveReload server/app/tool.)

This gives you a component containing a single script file, dist/livereload.js .

Installing using npm and Browserify

Including livereload.js into your Browserify bundle probably makes no sense, because livereload.js isn’t something you would ship to production.

But if you insist and you know what you’re doing, you can install LiveReload via npm:

and then add this to your bundle:

Note that livereload-js package uses window and document globals, so won’t run under Node.js environment.

The reason you need to specify LiveReloadOptions is that livereload.js won’t be able to find its

LiveReload 2 server listens on port 35729 and serves livereload.js over HTTP (besides speaking the web socket protocol on the same port).

A slightly smarter way is to use the host name of the current page, assuming that it is being served from the same computer. This approach enables LiveReload when viewing the web page from other devices on the network:

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.

источник