Прочее

Скрипт для умного обновления страницы при верстке в PHPStorm

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

Совсем недавно я уже писал о том, что верстаю одностраничный сайт с тематикой «Свадебные платья». И именно в процессе верстки данной страницы мне пришло в голову упростить процесс разработки в PHPStorm.

Обычный порядок верстки в PHPStorm:

  1. Внесение изменений в css или html файлы.
  2. Разворачивание окна браузера сочетанием клавиш Alt + Tab
  3. Обновление страницы для просмотра изменений

И мне безумно надоедает обновлять страницу каждый 5 секунд, именно поэтому я решил автоматизировать этот процесс.

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

Поэтому необходимо было найти расширение, которое обновляет страницу, когда браузер разворачивается. Но такое расширения не было найдено. Поэтому я написал небольшой скрипт в проекте:

$(window).focus(function(){ setTimeout("location.reload()", 200); });

Данный скрипт использует библиотеку JQuery, поэтому необходимо ее подключить в начале страницы.

Ловится фокус окна, т.е. разворачивание браузера и далее делается перезагрузка страницы через 0,2 секунды. Почему обновление только через 0,2 секунды, а не сразу? Просто PHPStorm, который делает автоматическое сохранение всех изменений, за этот промежуток времени сохраняет всё. Если уменьшить этот интервал, то страница будет обновляться не успев сохраниться, и вы не будете видеть изменения.

Есть и небольшие недочеты в этом скрипте: он некорректно работает в firefox и IE, начинается бесконечный редирект страницы.Не забудьте удалить этот скрипт из проекта, когда будете его выпускать а продакшн.

P.S. есть расширение для Chrome от  PHPStorm для обновления страницы, но как я понял, для этого необходимо разворачивать локальный сервер.

UPD: Данная статья уже давно утратила свою уникальность и я не рекомендую использовать данный подход. Лучше использовать gulp, grunt или webpack для этих целей. Далее это вам позволит проще перейти на frontend фреймворки.

image

Евгений

Специалист по разработке систем на современных PHP фреймворках.