Прочее

Скрипт для умного обновления страницы при верстке в 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 фреймворки.

{"time":1561230626062,"blocks":[{"type":"paragraph","data":{"text":"Небольшой скрипт, который избавляет от постоянного обновления страницы руками при верстке сайта."}},{"type":"paragraph","data":{"text":"Совсем недавно я уже писал о том, что верстаю одностраничный сайт с тематикой «Свадебные платья». И именно в процессе верстки данной страницы мне пришло в голову упростить процесс разработки в PHPStorm."}},{"type":"paragraph","data":{"text":"Обычный порядок верстки в PHPStorm:"}},{"type":"list","data":{"style":"ordered","items":["Внесение изменений в css или html файлы.","Разворачивание окна браузера сочетанием клавиш Alt + Tab","Обновление страницы для просмотра изменений"]}},{"type":"paragraph","data":{"text":"И мне безумно надоедает обновлять страницу каждый 5 секунд, именно поэтому я решил автоматизировать этот процесс."}},{"type":"paragraph","data":{"text":"Немного покопавшись в интернете, нашел расширение для браузера, которое обновляет указанную страницу каждые n секунд, через фиксированный интервал времени. Но данное расширение мне показалось неудобным, так как в процессе верстки можно каждую секунду бегать в браузер и обновлять страницу, а можно и минут 5 не трогать браузер."}},{"type":"paragraph","data":{"text":"Поэтому необходимо было найти расширение, которое обновляет страницу, когда браузер разворачивается. Но такое расширения не было найдено. Поэтому я написал небольшой скрипт в проекте:"}},{"type":"code","data":{"code":"$(window).focus(function(){\n setTimeout(\"location.reload()\", 200);\n});"}},{"type":"paragraph","data":{"text":"Данный скрипт использует библиотеку JQuery, поэтому необходимо ее подключить в начале страницы."}},{"type":"paragraph","data":{"text":"Ловится фокус окна, т.е. разворачивание браузера и далее делается перезагрузка страницы через 0,2 секунды. Почему обновление только через 0,2 секунды, а не сразу? Просто PHPStorm, который делает автоматическое сохранение всех изменений, за этот промежуток времени сохраняет всё. Если уменьшить этот интервал, то страница будет обновляться не успев сохраниться, и вы не будете видеть изменения."}},{"type":"paragraph","data":{"text":"Есть и небольшие недочеты в этом скрипте: он некорректно работает в firefox и IE, начинается бесконечный редирект страницы.Не забудьте удалить этот скрипт из проекта, когда будете его выпускать а продакшн."}},{"type":"paragraph","data":{"text":"P.S. есть расширение для Chrome от  PHPStorm для обновления страницы, но как я понял, для этого необходимо разворачивать локальный сервер."}},{"type":"paragraph","data":{"text":"UPD: Данная статья уже давно утратила свою уникальность и я не рекомендую использовать данный подход. Лучше использовать gulp, grunt или webpack для этих целей. Далее это вам позволит проще перейти на frontend фреймворки."}}],"version":"2.13.0"}
image

Евгений

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