@123581321345589
web-разработчик

Как настроить перезагрузку страницы браузера при сохранении файла?

Желаемый результат:
При сохранении любого файла проекта (не только CSS, JS и HTML) должна перезагружаться страница в браузере, причем не на локальном, а на удаленном сервере (загрузку файлов при сохранении я настроил).

В SublimeText у меня настроен LiveReload - отлично работает, а в PHPStorm с этим прям беда.

Пробовал разные варианты, но ни один у меня не заработал.
Кто чем пользуется для этих целей?

Важно:
  • Отслеживать изменение (сохранение) PHP файлов
  • Обновлять страницу на удаленном сервере


UPD 1

Вариант через Live Edit
1. Установил плагин `Live Edit`, убедился что включены плагины `JavaScript Debugger` и `JavaScript and TypeScript`
2. Поставил галку `JavaScript, HTML and CSS` в настройках `File | Settings | Build, Execution, Deployment | Debugger | Live Edit`.
3. Настроил браузер в котором будет открываться сайт (в моем случае это Я.Браузер) `Run | Edit Configurations ...`, там же указал путь к папке `User Data` моего браузера.
4. Теперь нужно сначала закрыть браузер, потом запустить дебаг (иначе кака то лажа с портами и не работает как надо).
Вроде как то работает, но напрягает морока с закрытием браузера и запуском дебаг мода.

Хотелось бы узнать как настроить другие варианты.

UPD 2

`browser-sync`
Настроил через `gulp task`
let gulp = require('gulp'),
    browserSync = require('browser-sync').create();

gulp.task('watch', function () {
    gulp.watch(['./**/*.*']).on('change', function () {
        browserSync.reload();
    });
});

Скрипт выполняется, но далее плагин предлагает перед закрытием `` прописать сниппет:
<script id="__bs_script__">//<![CDATA[
    document.write("<script async src='http://HOST:3000/browser-sync/browser-sync-client.js?v=2.27.10'><\/script>".replace("HOST", location.hostname));
//]]></script>

И вот с этим возникают проблемы. Браузер выдает ошибку `net::ERR_CONNECTION_REFUSED`.
Пробовал разные вариации подключения данного скрипта.. все без толку.
К тому же этот скрипт генерируется плагином "на лету", физически такого файла не существует.

P.S.
Вручную вставлять код для перезагрузки страницы - это конечно та еще морока.. но думаю это решается (может через тот же gulp).

UPD 3

`gulp-livereload`
После двух дней я таки настроил :)
Ответ в ответах
  • Вопрос задан
  • 83 просмотра
Решения вопроса 1
@123581321345589 Автор вопроса
web-разработчик
Установить Gulp cli (глобально)
npm i -g gulp-cli

Установить Gulp (локально)
npm i gulp --save-dev

Установить Gulp LiveReload (локально)
npm i --save-dev gulp-livereload

Разрешить выполнение скриптов PowerShell (файлов с расширением .ps1) в Windows
Set-ExecutionPolicy unrestricted

gulpfile.js
let gulp       = require('gulp'),
    livereload = require('gulp-livereload');

gulp.task('LiveReload', function () {
  livereload.listen();
  gulp.watch('./**/*', {delay: 600}, async function () {
    livereload.reload();
  });
});


Запустить livereload в IDE
View | Tool Windows | Gulp

Или через консоль
gulp LiveReload

Включить в браузере расширение LiveReload
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы