Вспомните один момент: как часто вы вручную загружали сайт, чтобы увидеть изменения, внесенные в редакторе кода? Сотни раз, может быть, тысячи, если вы немного больше занимаетесь веб-бизнесом.
Такое поведение кажется нам настолько присущим, что мы не ставим это под сомнение. И все же это может быть так просто. Есть небольшой инструмент под названием 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 может показаться пугающей, но как только все запустится, вы не будете оглядываться назад. Это всего лишь небольшой инструмент, но он значительно повысит вашу производительность.