Livereload sublime text 3 не работает: Как заставить работать LiveReload + Sublime Text 3 в Chrome? — Хабр Q&A – Как подружить Sublime Text 3 и LiveReload? — Хабр Q&A

livereload sublime text 3 не работает

На чтение 5 мин. Просмотров 3 Опубликовано 15.12.2019

Сегодня мы рассмотрим настройку популярного редактора кода Sublime Text 3 для веб-разработки.

Внимание! Вышла более новая версия руководства.
С новым материалом вы можете ознакомиться Здесь.

Плагины

emmet — плагин для скоростной верстки.

livereload — автообновление страницы.

Для корректной работы плагина LiveReload в Sublime Text 3 необходимо дописать в пользовательских настройках плагина следующую конструкцию (подробнее в видео):

sass — настроим корректную подсветку SASS в Sublime Text 3.

jade — HTML препроцессор.

gist — плагин для быстрого доступа к вашим сниппетам на GitHub.

brackethighlighter

autofilename — автокомплит для подключения внешних файлов в верстку.

colorhighlighter — подсветка цвета.

BufferScroll — сохранение позиции курсора в документе.

Goto-CSS-Declaration — плагин для быстрого поиска соответствующего класса в CSS, SASS, LESS.

Фишки

• Поменяем тему на twilight.
• Научимся множественному выделению.
• Назначим клавиши для события reindent (хоткей для автоматического формата документа).
• Научимся управлять числовыми значениями (Инкремент и Декремент).

Ссылки

LiveReload Browser Extension: http://livereload.com/extensions/

Премиум уроки от WebDesign Master

Создание контентного сайта на Jekyll от А до Я

Создание современного интернет-магазина от А до Я

Я — фрилансер! — Руководство успешного фрилансера

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

3 ответа 3

Одним из решений может быть выкинуть сервер LiveReload, который поддерживает пакет для Sublime Text. Это не единственная реализация LiveReload-сервера.

Есть также guard-livereload : плагин для системы Guard для выполнения действий при изменении файлов. Он написан на Ruby и потому для работы требует установленного Ruby. Порядок установки минимально отличается от других плагинов для Guard, вроде guard-haml , об установке и запуске которого я уже писал ранее.

В Guardfile можно задать шаблоны путей, изменение файлов по которым даст сигнал клиенту LiveReload для обновления. В README есть пример:

Код выше, разумеется, на Ruby. Каждая строчка watch добавляет на отслеживание пути, подходящие под регулярное выражение, относительно корня проекта (рабочей директории, где запущен guard ). Регулярка записывается /так/ , %r , или другими способами. Само выражение можно проверить на Rubular или просто в Interactive Ruby (IRB).

Guard можно загрузить и другими задачами, связанными с реакцией на изменение файлов.
См. список плагинов Guard.

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 . Вот если бы и этого не нужно было делать, было бы совсем замечательно!.

RxJs — map

Первый «серьезный» метод в моей RxJs-копилке знаний. На самом деле все просто — этот метод получает на вход поток, обрабатывает каждый ev. … Continue reading

sublimetext3 — Как установить LiveReload на Sublime Text 3?

Платформа я использовал: Linux Mint 17+

Сначала установите возвышенный текст-здесь http://www.sublimetext.com/3 или следовать своему собственному пути , который вы предпочитаете (я сделал это с Linux Mint менеджер пакетов).

Во- вторых, установить контроль пакет отсюда https://packagecontrol.io/installation#st3 (инструкция ясно дается на веб — сайте , так что я не объяснить это много).

В- третьих, открытый контрольный пакет (Shortcut: Ctrl+Shift+P) и поискPackage Control: Add Repository

Теперь наступает область для ввода URL в нижней части окна возвышенного текст 3. Введите https://raw.github.com/Grafikart/ST3-LiveReload/master/package.json

Снова откройте контрольный пакет и поиск , Package Control: Install Packageа затем искать LiveReloadв появившемся окне.

Настройка LiveReload пакета Установка на Preferences > Package Settings > LiveReload > Setting - Defaultи вставьте:

 
       { 
           "enabled_plugins": [ 
               "SimpleReloadPlugin", 
               "SimpleRefresh" 
           ]
       }
    

Теперь для вашего браузера, установить LiveReload штепсель , как показано ниже:
Firefox : http://download.livereload.com/2.1.0/LiveReload-2.1.0.xpi
Chrome : https://chrome.google.com/webstore/detail / LiveReload / jnihajbhpnppcggbcgedagnkighmdlei
Safari : http://download.livereload.com/2.1.0/LiveReload-2.1.0.safariextz

Не забудьте включить плагин LiveReload в браузере после установки его, так что вы можете увидеть изменения кода, отраженные в браузере сразу.

Примечание: пользователи Chrome, для LiveReload поддержки file://страниц, перейдите chrome://extensions/, и галочку Allow access to file URLs.

Снимок взят из Safari для Mac OSX:

Наслаждайтесь, Живите Reload с Sublime Text 3.

Благодаря Энтони Лозано для http://anthozano.fr/livereload-pour-sublime-text-3/ .

Как установить LiveReload на Sublime Text 3?

Платформа, которую я использовал: Linux Mint 17+
Я хочу поблагодарить http://anthozano.fr/livereload-pour-sublime-text-3/ . Я смог запустить live reload на sublime text 3 с инструкциями на веб-сайте. Тем не менее, сайт написан на французском языке (я полагаю, — сказал Google translate), поэтому я подумал, что могу написать шаги здесь.

Сначала установите sublime text 3 отсюда http://www.sublimetext.com/3 или следуйте своим собственным путем, который вы предпочитаете (я сделал это с помощью Linux Mint Package manager).

Во-вторых, установите управление пакетами отсюда https://packagecontrol.io/installation#st3 (инструкция явно дана на сайте, поэтому я не стал много объяснять).

В-третьих, откройте элемент управления пакетом (ярлык: Ctrl+Shift+P ) и найдите Package Control: Add Repository

Теперь появляется область для ввода URL в нижней части окна sublime text 3. Введите https://raw.github.com/Grafikart/ST3-LiveReload/master/package.json .

Снова откройте управление пакетами и найдите Package Control: Install Package , а затем найдите LiveReload в следующем окне.

Настройте параметр пакета LiveReload на Preferences > Package Settings > LiveReload > Setting - Default

 
       { 
           "enabled_plugins": [ 
               "SimpleReloadPlugin", 
               "SimpleRefresh" 
           ]
       }
    

Теперь для Вашего браузера установите LiveReload plug in , как показано ниже :
Firefox : http://download.livereload.com/2.1.0/LiveReload-2.1.0.xpi
Хром : https://chrome.google.com/webstore/detail/livereload/jnihajbhpnppcggbcgedagnkighmdlei
Safari : http://download.livereload.com/2.1.0/LiveReload-2.1.0.safariextz

Не забудьте включить плагин LiveReload в браузере, как только вы его установили, так что вы можете сразу увидеть изменения кода, отраженные в браузере.

Примечание: пользователи Chrome, для того чтобы LiveReload поддерживал file:// страницы, перейдите к chrome://extensions/ и отметьте Allow access to file URLs.

Снимок сделан с Safari для Mac OSX:

Наслаждайтесь, Живая перезагрузка с возвышенным текстом 3.

Спасибо Энтони Лозано за http://anthozano.fr/livereload-pour-sublime-text-3/ .

Как навсегда включить плагин Sublime Text 3 LiveReload

Недавно я установил плагин LiveReload для Sublime Text 3. Я также установил расширение LiveReload хром. Все работает отлично, однако есть одна оставшаяся головная боль. Мне нужно войти в управление пакетами в Sublime и включить плагин LiveReload Simple Reload каждый раз, когда я открываю Sublime. Есть ли способ постоянно включать Плагины Sublime Text 3 LiveReload?

Поделиться Источник MattDionis     01 сентября 2014 в 00:44

2 Ответа

4

Я установил: https://github.com/Grafikart/ST3-LiveReload

Далее: Настройки — > Настройки Packge — > LiveReload — > настройки-пользователь

Добавь:

{ 
    "enabled_plugins": [
        "SimpleRefresh"
    ]
}

Поделиться Ziv     22 марта 2015 в 15:30

1

<!DOCTYPE HTML>
<html>
    <head>

    </head>
    <body>
        <h2>Hello World!</h2>
    </body>
</html>