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

Question

[Василий Черненков]

Желаемый результат:
При сохранении любого файла проекта (не только 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`
После двух дней я таки настроил :)
Ответ в ответах

Comments

[Сергей delphinpro]

browser-sync легко настраивается в отрыве от IDE.
в настройках указываешь какие файлы слушать, и какой адрес открывать (в данном случае из интернета) и запускаешь.
единственное, что нужно будет сделать отдельно на удаленном сервере – это встроить в шаблон страницы вызов скрипта, который browser-sync вставляет в страницы автоматом при локальной разработке.
когда-то давно я такой херней занимался, пока не почувствовал, что это полная лажа. гораздо удобнее разворачивать локальную копию проекта.

Answer 1

[Василий Черненков]

Установить 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

Comments

[stalkerxxl]

3. Настроил браузер в котором будет открываться сайт (в моем случае это Я.Браузер) `Run | Edit Configurations ...`, там же указал путь к папке `User Data` моего браузера.

Не совсем понял этот пункт.. можно подробнее? Или скриншот, если не сложно.. Спасибо!

[Василий Черненков]

php-dev1, как то так

[stalkerxxl]

Василий Черненков, ааа.. я думал "что-то особенное"... да, браузер подключен... странно, но не работает все равно.. продолжу копать дальше