LiveReload, плагины, фишки · GitHub
Настройка Sublime Text 3 для веб-разработки: LiveReload, плагины, фишки
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
Show hidden characters
| 00:46 — Установка Sublime Text 3 | |
| 02:06 — Установка Package Control | |
| Ctrl+Shift+P | |
| Install | |
| 03:55 — Установка Emmet | |
| 05:20 — Почему иногда не работает «Open in Browser» | |
| 07:33 — Первоначальная настройка Sublime Text | |
| 07:55 — Reindent по хоткею | |
| 20:37 — Установка и настройка LiveReload в Sublime Text 3 | |
| 25:48 — Установка и настройка SASS плагина для подсветки синтаксиса SASS | |
| 29:08 — Установка плагина Jade | |
| 29:52 — Установка и настрока плагина для работы с Gist Репозиторием | |
| Ctrl+k+o -открытие списка gist | |
| 35:00 — brackethighlighter: подсветка тегов и скобок | |
| 36:26 — autofilename: автокомплит для подключения внешних файлов в верстку | |
| 38:07 — colorhighlighter: подсветка цвета | |
| 39:30 — BufferScroll: сохранение позиции курсора в документе | |
| 40:55 — Goto-CSS-Declaration: плагин для быстрого поиска соответствующего класса в CSS, SASS, LESS | |
Key Win+Alt+. | |
| 44:37 — Смена темы в Sublime Text | |
| 45:25 — Множественное выделение в Sublime Text | |
| 47:04 — Инкремент и Декремент |
LiveReload — CoderLessons.com
Вспомните один момент: как часто вы вручную загружали сайт, чтобы увидеть изменения, внесенные в редакторе кода? Сотни раз, может быть, тысячи, если вы немного больше занимаетесь веб-бизнесом.
Такое поведение кажется нам настолько присущим, что мы не ставим это под сомнение. И все же это может быть так просто. Есть небольшой инструмент под названием LiveReload, который волшебным образом перезагружает веб-страницу для нас, как только мы ее сохраняем. Возможно, вы слышали об этом, но никогда не пытались попробовать, так как у установки могут быть некоторые подводные камни.
Следующее руководство покажет, как запустить LiveReload и, наконец, дать CMD + R (соответственно F5 для наших друзей по Windows) немного отдохнуть.
Это простые вещи
Самый простой способ принести облегчение – это одноименное приложение, которое можно найти в Mac App Store, при этом акцент здесь делается на «Mac», поскольку программа доступна только для этой ОС в окончательной версии. На сайте вы также найдете альфа-версию для Windows, но я никогда не проверял ее. Однако рабочий процесс, описанный ниже, должен быть более или менее одинаковым. Кроме того, роскошь приложения LiveReload имеет буквально свою цену, так как она стоит 8,99 евро (6,99 фунтов стерлингов / 9,99 долларов).
К счастью, как часто в жизни, есть альтернатива – может быть, не такая роскошная и немного потеющая, но столь же эффективная, как и платное приложение. LiveReload также готов к использованию непосредственно в любом любимом редакторе кода Sublime Text 2 и некоторых других (список всех поддерживаемых редакторов можно найти здесь , но я покажу вам от имени первого, как использовать плагин.
Требуется веб-сервер
Независимо от того, какое приложение вы выберете, обычно есть два способа использовать LiveReload в вашем ежедневном рабочем процессе. Каждому из них нужны некоторые приготовления, но они не так сложны. Самый эффективный способ – хотя это может показаться довольно сложным для начинающих – это настроить веб-сервер. Таким образом, вам не нужно изменять файлы вашего проекта, чтобы добавить поведение LiveReload. Самый простой способ – получить копию XAMPP ( Mac , Windows ) и запустить установщик.
После этого найдите каталог «htdocs», который обычно находится в «/ Applications / XAMPP / xamppfiles / htdocs» на Mac и «xampp \ htdocs» в Windows, создайте там новую папку и перетащите файлы своего веб-сайта. внутрь. Теперь вам просто нужно запустить веб-сервер на панели управления, нажав кнопку «Пуск» Apache. Теперь ваш сайт должен быть доступен по адресу http: // localhost / Посредством чего обозначает имя папки, которую вы только что создали.
Панель управления XAMMP.Mac (слева), Windows (справа)
Не забывайте свое расширение
Поверьте мне, теперь все намного проще. Следующее, что вам нужно установить, это расширение браузера LiveReload, которое вы можете найти здесь для Chrome и здесь для Firefox (да, нет IE). Теперь просто наведите приложение LiveReload на папку, в которую вы поместили свои файлы после настройки XAMPP, нажав на знак плюса в левом нижнем углу окна.
Добавьте проект, нажав на знак +.
Затем откройте URL-адрес localhost веб-сервера сверху и включите расширение LiveReload, щелкнув соответствующий символ (как показано на скриншотах ниже). Вернувшись в приложение LiveReload, оно должно теперь сказать что-то вроде «1 браузер подключен, пока 0 изменений обнаружено» внизу. Как только вы измените файл своего веб-сайта – будь то HTML, CSS или JavaScript – изменения должны быть немедленно отражены в браузере.
Кнопки для расширения LiveReload в Firefox (вверху) и Chrome (внизу).
Редактор кода, пожалуйста
Если вы предпочитаете оставаться в привычной для вас среде редактора кода – в данном случае Sublime Text 2, который я здесь приведу в качестве примера – реализация немного отличается. Сначала вам необходимо установить необходимый диспетчер пакетов Package Control, который просто требует ввода некоторого кода в консоль («Вид> Показать консоль» в строке меню Sublime Text 2). Точный процесс установки можно найти здесь .
После того, как вы перезапустили редактор, нажмите CMD + Shift + P (CTRL + Shift + P для Windows), чтобы открыть приглашение управления пакетами, введите «Установить» и «Управление пакетами: установить пакет» должно быть немедленно выделено. Затем нажмите Enter, подождите несколько секунд для загрузки, напишите «LiveReload», выберите появившуюся запись, снова нажмите «Enter» и плагин будет установлен.
Теперь перезапустите Sublime Text 2 еще раз, и, как в родном приложении, вам просто нужно ввести локальный URL-адрес сверху в ваш браузер, включить плагин LiveReload, нажав на него, и с этого момента каждое изменение файлов вашего проекта напрямую отражается в вашем браузере без необходимости перезагрузки.
Что вводить в командной строке управления пакетами.
Гораздо проще
Если все это слишком сложно для вас, все еще остается второй способ использовать LiveReload, который я обещал выше. Это намного проще в настройке, но имеет недостаток в том, что вам нужно вставлять небольшой скрипт в каждую HTML (или PHP или любую другую) страницу вашего проекта (которую плагин браузера обрабатывает для вас при первом способе). Это выглядит так:
<script>document.write('<script src="http://' + (location.host || 'localhost').split(':')[0] + ':35729/livereload.js?snipver=1"></'
+ 'script>')</script> Если ваш веб-сайт работает на другом сервере, вам нужно указать вместо этого IP-адрес вашего локального компьютера.
<script src="http://192.168.0.1:35729/livereload.js? snipver=1"></script>
Вставьте его прямо перед закрытием тег и все готово. Да, все готово. Вы можете подумать, что это намного проще, чем хлопоты с веб-серверами и расширениями браузера, но не каждый проект позволяет вставить что-то еще ненужное на каждую страницу. Но там, где тень, там и свет (или наоборот?). Если вы предпочитаете метод сценариев LiveReload, у вас есть большой бонус: живые изменения также доступны на других устройствах, кроме вашей разрабатываемой машины, что, однако, может снова потребовать веб-сервер. Хотите знать, как это сделать? Узнайте IP-адрес вашего компьютера и введите его – включая (веб-сервер) путь к вашему проекту – на ваше устройство, для которого вы хотите включить режим LiveReload. Теперь, если вы измените файл, различия также волшебным образом появятся на вашем (мобильном) устройстве. Сладкий, а?
Метод сценария работает с приложением 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 может показаться пугающей, но как только все запустится, вы не будете оглядываться назад. Это всего лишь небольшой инструмент, но он значительно повысит вашу производительность.
sublimetext3 — LiveReload для Sublime Text 3 — не работает
Задавать вопрос
спросил
Изменено 7 месяцев назад
Просмотрено 8к раз
Я установил LiveReload для Sublime Text 3, следуя этому руководству.
Я установил плагин LiveReload для FireFox (он включен).
Я проверил это с помощью этого простого HTML-кода:
<голова>
<тело>
Привет, мир!
По какой-то странной причине это не работает. Что может вызвать эту проблему?
- sublimetext3
- livereload
1
Решение:
- Откройте палитру команд с помощью Ctrl + Shift + P
- Тип LiveReload
- Когда выделено «Включить/отключить плагины», нажмите Введите .
Или
- Перейдите в «Настройки» > «Настройки пакета» > «LiveReload» > «Плагины» > «Включить/отключить плагины» и нажмите
1
В случае Chrome нажмите на три точки в правом верхнем углу браузера.
Перейдите в «Дополнительные инструменты»> «Расширения»> найдите расширение для перезагрузки в реальном времени. Нажмите на детали, а затем разрешите доступ к URL-адресу файла, как показано на фотографии.
Сделав это, перейдите к возвышенному тексту. Перейдите в «Настройки»> «Настройки пакета»> «LiveReload»> «Плагин» и нажмите «Включить/отключить плагины».
(Если плагин был отключен, он будет включен, и наоборот)
Затем не забудьте закрыть браузер и возвышенный текст и снова открыть оба.
Это должно сработать.
Зарегистрируйтесь или войдите в систему
Зарегистрируйтесь с помощью Google
Зарегистрироваться через Facebook
Зарегистрируйтесь, используя электронную почту и пароль
Опубликовать как гость
Электронная почта
Требуется, но не отображается
Опубликовать как гость
Электронная почта
Требуется, но не отображается
Sublime Text 3 Browser Live Preview — PHP — SitePoint Forums
satishmahrjan
#1
я пытаюсь просмотреть свою работу, предварительный просмотр в реальном времени на возвышенном тексте 3, я использовал синхронизацию браузера и мод в реальном времени, но в сегодняшние даты они, кажется, больше не работают… как я могу сделать предварительный просмотр моего php-кода в реальном времени в браузер…???
Гэндальф
#2
Нельзя ли просто использовать Ctrl+s в редакторе и F5 в браузере, или я что-то упустил?
Матеус
#3
Вы можете попробовать перезагрузку в реальном времени, которая является еще одним пакетом Sublime 3.
В качестве альтернативы, возможно, вам следует рассмотреть пакет синхронизации браузера npm или даже Parcel, который поставляется со встроенной перезагрузкой в реальном времени без дополнительной настройки.
Гэндальф:
Нельзя ли просто использовать
Ctrl+sв редакторе иF5в браузере, или я что-то упустил?
Это действительно возможно, но для повышения производительности вы, вероятно, захотите, чтобы ваши изменения отображались, как только вы сохраняете файл, над которым работаете. Таким образом, вам не нужно оставлять курсор в другом окне и фокусироваться вне редактора. Звучит как крошечное изменение, но поверьте мне — это экономит много времени.
1 Нравится
сатишмахрджан
#4
то, что было сделано, это установить установщик пакета после этой простой установки синхронизации браузера из установки пакета, всякий раз, когда я нажимаю «Запуск» в меню синхронизации браузера, его открытый браузер Chrome и адрес, открытый в браузере: http://localhost: 3000/, я верю это должно быть http://localhost/myprojects (я установил node.js, как кто-то сказал мне)… может указать мне шаг для синхронизации браузера, вы не возражаете…
РайанРиз
#5
Матеус:
, но поверьте — это экономит много времени.
Это действительно так. У нас есть версия для разработки (в которой изменения CSS не вызывают перезагрузку страницы, но вызывает JS), которая уходит с локального хоста: 3000.
Он сохраняет все локально и не отправляет файлы на сервер, что медленнее.
Затем у нас есть локальный хост: 5000, который обновляется при каждом изменении css/js и фактически отправляет файлы на сервер при каждом сохранении. Прирост производительности заметен.
Джон_Бетонг
#6
РайанРиз:
Он сохраняет все локально и не отправляет файлы на сервер, что медленнее.
Иногда при копировании локальных файлов на сервер у меня возникали конфликты, которые мешают файлам сервера делать то, что я хочу, поэтому предпочитаю искать проблемы как можно скорее:
разрабатывать локально с использованием Sublime
часто обновлять локальную открытую страницу браузера
скачкообразно RSYNC с локального терминала
после RSYNC обновите страницу песочницы браузера сервера
Пример использования RSYNC:
rsync -avz /var/www/ci4-strict.
