Автоматически перезагружать браузер, когда я сохраняю изменения в html-файле, в Chrome?

Question

Я редактирую HTML-файл в Vim и хочу, чтобы браузер обновлялся всякий раз, когда файл под ним изменяется.

Существует ли плагин для Google Chrome, который будет прослушивать изменения в файле и автоматически обновлять страницу каждый раз, когда я сохраняю изменения в файле? Я знаю, что есть XRefresh для Firefox, но я не мог заставить XRefresh работать вообще.

Насколько сложно было бы написать сценарий, чтобы сделать это сам?

Answer 1

Самым гибким решением, которое я нашел, является расширение chrome LiveReload в сочетании с сторожевым сервером .

Просмотр всех файлов в проекте или только тех, которые вы указали.Вот пример конфигурации Guardfile:

guard 'livereload' do
  watch(%r{.*\.(css|js|html|markdown|md|yml)})
end

Недостатком является то, что вы должны настроить это для каждого проекта, и это помогает, если вы знакомы с ruby.

Я также использовалРасширение Tincr Chrome - но оно тесно связано с фреймворками и файловыми структурами.(Я попытался подключить tincr для проекта jekyll, но он позволял мне просматривать только один файл на предмет изменений, не считая включений, частичных или макетных изменений).Tincr, однако, отлично работает из коробки с такими проектами, как rails, которые имеют согласованную и предопределенную файловую структуру.

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

Answer 2

В node.js вы можете соединить primus.js (websockets) с gulp.js + gulp-watch (соответственно, запускающий задачу и изменяющий слушатель), так что gulp позволяет окну вашего браузера знать, что оно должно обновляться всякий раз, когда HTML, JS, и т. д., изменить. Это не зависит от ОС, и я работаю в локальном проекте.

Здесь страница обслуживается вашим веб-сервером, а не загружается как файл с диска, что на самом деле больше похоже на реальную вещь.

Answer 3

Это можно сделать с помощью простого скрипта Python.

1. Используйте pyinotify для мониторинга определенной папки.
2. Использовать Chrome с включенной отладкой. Обновление можно выполнить через соединение через веб-сокет.

Полную информацию можно найти здесь .

Answer 4

Быстрое решение, которое я иногда использую, состоит в том, чтобы разделить экран на два, и каждый раз, когда вносятся изменения, щелкните документ xD.

<script>
document.addEventListener("click", function(){
    window.location.reload();
})
</script>

Answer 5

Я знаю, что это старый вопрос, но в случае, если он кому-то помогает, есть пакет reload npm, который решает его.

В случае, если вы не запускаете его на сервере или получили ошибку Live.js doesn't support the file protocol. It needs http.

Просто установите его:

npm install reload -g

и затем в вашем каталоге index.html выполните:

reload -b

Запустится сервер, который будет обновляться каждый раз, когда вы сохраняете свои изменения.

Есть много других вариантов, если вы запускаете его на сервере или что-то еще. Проверьте ссылку для более подробной информации!

Answer 6

Хорошо, вот мое грубое решение Auto Hotkey (В Linux попробуйте Auto Key ). Когда нажата комбинация клавиш save , активируйте браузер, нажмите кнопку reload , а затем переключитесь обратно в редактор. Я просто устал от запуска других решений. Не будет работать, если ваш редактор выполняет автосохранение.

^s::   ; '^' means ctrl key. '!' is alt, '+' is shift. Can be combined.
    MouseGetPos x,y
    Send ^s

    ; if your IDE is not that fast with saving, increase.
    Sleep 100

    ; Activate the browser. This may differ on your system. Can be found with AHK Window Spy.
    WinActivate ahk_class Chrome_WidgetWin_1
    WinWaitActive ahk_class Chrome_WidgetWin_1
    Sleep 100   ; better safe than sorry.

    ;~ Send ^F5   ; I dont know why this doesnt work ...
    Click 92,62   ; ... so lets click the reload button instead.

    ; Switch back to Editor. Can be found with AHK Window Spy.
    WinActivate ahk_class zc-frame
    WinWaitActive ahk_class zc-frame
    Sleep 100   ; better safe than sorry.

    MouseMove x,y
    return

Answer 7

(function() {
    setTimeout(function(){
        window.location.reload(true);
    }, 100);
})();

Сохраните этот код в файл livereload.js и включите его в конец HTML-скрипта следующим образом:

<script type="text/javascript" src="livereload.js"></script>

Что это сделает, обновитстраница каждые 100 миллисекунд.Любые изменения, которые вы делаете в коде, мгновенно видны глазам.

Answer 8

pip install https://github.com/joh/when-changed/archive/master.zip

alias watch_refresh_chrome=" when-changed -v -r -1 -s ./ osascript -e 'tell application \"Google Chrome\" to tell the active tab of its first window to reload' "

, затем просто введите каталог, который вы хотите отслеживать, выполните "watch_refresh_chrome"

Answer 9

Основано на ответе atkei для OSX:

$ brew install fswatch

Закинуть все это в reload.scpt:

function run(argv) {
    if (argv.length < 1) {
        console.log("Please supply a (partial) URL to reload");
        return;
    }
    console.log("Trying to reload: " + argv[0]);
    let a = Application("Google Chrome");
    for (let i = 0; i < a.windows.length; i++) {
        let win = a.windows[i];
        for (let j = 0; j < win.tabs.length; j++) {
            let tab = win.tabs[j];
            if (tab.url().startsWith("file://") && tab.url().endsWith(argv[0])) {
                console.log("Reloading URL: " + tab.url());
                tab.reload();
                return;
            }
        }
    }
    console.log("Tab not found.");
}

Это перезагрузит первую найденную вкладку, которая начинается с file:// и заканчивается первым аргументом командной строки.Вы можете настроить его по своему усмотрению.

Наконец, сделайте что-то вроде этого.

fswatch -o ~/path/to/watch | xargs -n1 osascript -l JavaScript reload.scpt myindex.html 

fswatch -o выводит количество файлов, которые изменились в каждом событии изменения, по одному на строку.Обычно он просто печатает 1.xargs читает эти 1 s in, а -n1 означает, что он передает каждый из них в качестве аргумента новому выполнению osascript (где оно будет игнорироваться).

Answer 10

Установка и настройка chromix

Теперь добавьте это к вашему .vimrc

autocmd BufWritePost *.html,*.js,*.css :silent ! chromix with http://localhost:4500/ reload

смените используемый порт на