Sublime text 3 livereload как настроить

Настройка Sublime Text 3 для веб-разработки: LiveReload, плагины, фишки

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

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

Плагины

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

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

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

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

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

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

brackethighlighter — подсветка скобок, тегов в Sublime Text 3.

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

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

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

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

Источник

Live Reload — плагин для Sublime text

LiveReload — плагин для Sublime Text, который позволяет редактировать код и обновлять страницу сайта на локальном сервере в реальном времени. Т.е. я редактирую код страницы и она автоматически обновляется, показывая мне изменения.

Это очень удобно т.к. пропадает необходимость постоянно прыгать с окна на окно и обновлять страницу!

Процесс работы

• берем Winsplit (для Windows 7) и делим экран на две части;
• в одну сторону — браузер, в другую — Sublime Text с рабочим Livereload;
• начинаем работать с кодом и видим, что браузер обновляется сам и изменения вступают в силу;

Особенности Livereload

• работает только с локальными серверами или просто с файлами на компьютере;
• дополнительно требует установку программы;
• дополнительная вставка js-кода на страницу или установка плагина для браузера;

Как настроить LiveReload для Sublime Text

1. Подключить плагин. Для этого идем в репозиторий и скачиваем плагин, либо через поиск импортируем сразу в блокнот. Или берем его на: GitHub.com;
2. Скачиваем программу с официального сайта по ссылке;
3. Добавляем проект в программу Livereload;
4. Добавить полученный код на страницы сайта или включаем плагин в браузере!

Когда ведется работа над файлами, программа Livereload должна быть запущена. Так же нужно проверить настройки плагина, чтобы там были прописаны true для трех языков.

Источник

Sublime text 3 livereload как настроить

LiveReload for Sublime Text 3

A web browser page reloading plugin for the Sublime Text 3 editor.

1. Run “Package Control: Install Package” command, find and install LiveReload plugin.
2. Restart ST editor (if required)

Manual install, Linux users

Manual install, OSX users

Enable desired plug-ins via Command Palette (Ctrl+Shift+P) add livereload.js to you html document.

You can also use one of the extensions listed here http://livereload.com/extensions/

• Compass Preprocessor, compiles .scss, .sass and refreshes page when file is compiled
• Less Preprocessor, compiles .less and refreshes page when file is compiled
• Sass Preprocessor, compiles .scss, .sass with the latest installed sass version and refreshes page when file is compiled
• CoffeeScript Preprocessor, compiles .coffee and refreshes page when file is compiled
• Simple Reload, refresh page when file is saved
• Simple Reload with delay(400ms), wait 400ms then refresh page, when file is saved

• Simple Reload from http GET request, reloads page on visit to http://localhost:35729/callback/simplereloadplugincallback/on_post_compile
• Send content on change, sends file content to browser console

Sass Preprocessor usage

First, install latest version of sass

Activate the plugin in SublimeText3 via the package settings -> livereload -> plugins -> enable/disable plugins menu

Источник

Как заставить работать 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 для этой конкретной страницы будет работать.

Чел, ты лучший я пытался сделать через галп, но так ничего и не вышло.

У хрома все норм, просто нужно в расширениях у livereload поставить галочку «Разрешить открывать файлы по ссылкам».
В хроме на любую иконку расширения ПКМ -> Управление расширениями, ищите Livereload в списке и ставите эту галочку.

И все будет четко

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

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

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

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

1.Скрипт JS (livereload.js):

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 на Sublime Text 3?

Я использую Sublime Text 3 и хочу использовать LiveReload. У меня есть браузер для Chrome, который уже установлен. Node.js также установлен.

Как установить его в Windows 7? Он просто что-то говорит о пользователях Linux и OSX.

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

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

Сначала установите возвышенный текст 3 отсюда http://www.sublimetext.com/3 или следуйте по своему усмотрению (я сделал это с Linux mint Package manager).

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

В-третьих, откройте управление пакетом (ярлык: 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 и вставьте это:

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

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

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

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

Плагин, упомянутый в комментариях, LiveReload , доступен как для ST2, так и для ST3, как указанный графиком на ссылке «Управление пакетами», которую я только что предоставил. Он также отлично работает в Windows, так как большинство его пользователей находятся на этой платформе. Репозиторий Github может быть назван » LiveReload-sublimetext2 «, но если вы прочтете документацию, в нем четко упоминается ST3. Инструкции для Linux и OS X в readme предназначены для установки с помощью git . Вы также можете использовать git в Windows (если он установлен), но автор, по-видимому, не хотел вводить явные инструкции в README. Вместо этого предпочтительным способом установки является управление пакетами, как описанное выше, с помощью любезного пользователя DaV. Если его комментарий исчезнет, ​​сделайте следующее:

Открыть Sublime Text 3.
Откройте палитру команд с помощью Ctrl Shift P .
Введите pci , чтобы открыть Package Control: Install Package . Нажмите Enter .
Введите LiveReload и убедитесь, что выбран нужный пакет. Если нет, используйте клавиши со стрелками. Нажмите Enter .
Прочтите документацию и либо добавьте соответствующий JavaScript в свои документы, либо загрузите плагин браузера (который вы, кажется, уже сделали, так хорошо для вас).
Перейдите к разработке.

Источник