Я редактирую HTML-файл в Vim, и я хочу, чтобы браузер обновлялся при каждом изменении файла под ним.
Есть ли плагин для Google Chrome, который будет отслеживать изменения в файле и автоматически обновлять страницу каждый раз, когда я сохраняю изменение в файле? Я знаю, что для Firefox есть XRefresh, но мне вообще не удалось запустить XRefresh.
Насколько сложно было бы самому написать сценарий для этого?
Ответы:
Я полагаю, вы не используете OSX? В противном случае вы могли бы сделать что-то вроде этого с помощью applescript:
http://brettterpstra.com/watch-for-file-changes-and-refresh-your-browser-automatically/
Существует также плагин для Chrome под названием «автоматическое обновление плюс», в котором вы можете указать перезагрузку каждые x секунд:
https://chrome.google.com/webstore/detail/auto-refresh-plus/oilipfekkmncanaajkapbpancpelijih?hl=en
keywordна watch_keywordв следующей строке:if (URL of atab contains "#{keyword}") then
Решение на чистом JavaScript!
Просто добавьте в свой <head>:
<script type="text/javascript" src="http://livejs.com/live.js"></script>
Как? Просто включите Live.js, и он будет отслеживать текущую страницу, включая локальные CSS и Javascript, отправляя последовательные запросы HEAD на сервер. Изменения CSS будут применяться динамически, а изменения HTML или Javascript перезагрузят страницу. Попытайся!
Куда? Live.js работает в Firefox, Chrome, Safari, Opera и IE6 +, пока не будет доказано обратное. Live.js не зависит от среды разработки или языка, который вы используете, будь то Ruby, Handcraft, Python, Django, NET, Java, Php, Drupal, Joomla или что-нибудь еще.
Я скопировал этот ответ почти дословно отсюда , потому что я думаю, что он проще и более общий, чем принятый в настоящее время ответ здесь.
php -S localhost:8080
python3 -m http.serverи многие другие для других языков / инструментов .
Обновление : Tincr мертв.
Tincr - это расширение Chrome, которое обновляет страницу всякий раз, когда файл под ней изменяется.
Handy Bash однострочный для OS X, если вы установили fswatch ( brew install fswatch). Он отслеживает произвольный путь / файл и обновляет активную вкладку Chrome при наличии изменений:
fswatch -o ~/path/to/watch | xargs -n1 -I {} osascript -e 'tell application "Google Chrome" to tell the active tab of its first window to reload'
Подробнее о fswatch здесь: https://stackoverflow.com/a/13807906/3510611
Добавив в документ один метатег, вы можете указать браузеру автоматически перезагружаться с заданным интервалом:
<meta http-equiv="refresh" content="3" >
Помещенный в тег заголовка вашего документа, этот метатег будет указывать браузеру на обновление каждые три секунды.
http://livereload.com/ - родное приложение для OS X, альфа-версия для Windows. Открытый исходный код https://github.com/livereload/LiveReload2
Используйте Gulp для просмотра файлов и Browsersync чтобы перезагрузить браузер.
Шаги следующие:
В командной строке выполните
npm install --save-dev gulp браузер-синхронизация
Создайте gulpfile.js со следующим содержимым:
var gulp = require('gulp');
var browserSync = require('browser-sync').create();
var reload = browserSync.reload;
gulp.task('serve', function() {
browserSync.init({
server: {
baseDir: "./"
}
});
gulp.watch("*.html").on("change", reload);
});
Бегать
глоток подавать
Отредактируйте HTML, сохраните и увидите, как ваш браузер перезагрузится. Волшебство достигается за счет внедрения специальных тегов в ваши HTML-файлы на лету.
Я знаю, что это старый вопрос, но если он кому-то поможет, есть перезагрузка пакет npm, который его решает.
Если вы не запускаете его на сервере или получили сообщение об ошибке Live.js doesn't support the file protocol. It needs http.
Просто установите его:
npm install reload -g
а затем в каталоге index.html запустите:
reload -b
Он запустит сервер, который будет обновляться каждый раз, когда вы сохраните изменения.
Есть много других вариантов, если вы запускаете его на сервере или где-то еще. Проверьте ссылку для получения более подробной информации!
Для OS X и Chrome существует Java-приложение Refreschro. Он будет отслеживать данный набор файлов в локальной файловой системе и перезагружать Chrome при обнаружении изменений:
Если вы работаете в GNU / Linux, вы можете использовать довольно крутой браузер под названием Falkon . Он основан на Qt WebEngine . Это похоже на Firefox или Chromium, за исключением того, что он автоматически обновляет страницу при обновлении файла. Автоматическое обновление не имеет большого значения, используете ли вы vim, nano или atom, vscode, скобки, geany, коврик для мыши и т. Д.
В Arch Linux вы можете довольно легко установить Falkon:
sudo pacman -S falkon
Вот пакет оснастки.
Быстрое решение, которое я иногда использую, - это разделить экран на два и каждый раз, когда вносятся изменения, щелкать документ xD.
<script>
document.addEventListener("click", function(){
window.location.reload();
})
</script>
В node.js вы можете подключить primus.js (веб-сокеты) с gulp.js + gulp-watch (исполнитель задач и слушатель изменений, соответственно), так что gulp позволяет окну вашего браузера знать, что он должен обновляться всякий раз, когда html, js и т. д., поменять. Это агностик ОС, и он работает в локальном проекте.
Здесь страница обслуживается вашим веб-сервером, а не загружается как файл с диска, что на самом деле больше похоже на настоящую вещь.
Это работает для меня (в Ubuntu):
#!/bin/bash
#
# Watches the folder or files passed as arguments to the script and when it
# detects a change it automatically refreshes the current selected Chrome tab or
# window.
#
# Usage:
# ./chrome-refresher.sh /folder/to/watch
TIME_FORMAT='%F %H:%M'
OUTPUT_FORMAT='%T Event(s): %e fired for file: %w. Refreshing.'
while inotifywait --exclude '.+\.swp$' -e modify -q \
-r --timefmt "${TIME_FORMAT}" --format "${OUTPUT_FORMAT}" "$@"; do
xdotool search --onlyvisible --class chromium windowactivate --sync key F5 \
search --onlyvisible --class gnome-terminal windowactivate
doneВозможно, вам потребуется установить пакеты inotify и xdotool ( sudo apt-get install inotify-tools xdotoolв Ubuntu) и изменить аргументы--class на фактические имена вашего предпочтительного браузера и терминала.
Запустите сценарий, как описано, и просто откройте index.html в браузере. После каждого сохранения в vim скрипт будет фокусировать окно вашего браузера, обновлять его, а затем возвращаться в терминал.
xdotool search --name 127.0.0.1 windowactivate key F5для работы на localhost (127.0.0.1). 0.1) только, конечно. Теперь мне нужно снова вставить это в сценарий.
Самое гибкое решение, которое я нашел, - это расширение Chrome LiveReload в сочетании с сервером защиты .
Просматривайте все файлы в проекте или только те, которые вы указали. Вот пример конфигурации Guardfile:
guard 'livereload' do
watch(%r{.*\.(css|js|html|markdown|md|yml)})
end
Обратной стороной является то, что вы должны настраивать это для каждого проекта, и это поможет, если вы знакомы с Ruby.
Я также использовал расширение Tincr chrome, но похоже, что оно тесно связано с фреймворками и файловыми структурами. (Я попытался подключить tincr для проекта jekyll, но это позволило мне наблюдать за изменениями только в одном файле, без учета включений, частичных изменений или изменений макета). Однако Tincr отлично работает с такими проектами, как rails, которые имеют согласованные и предопределенные файловые структуры.
Tincr был бы отличным решением, если бы он допускал повторную загрузку шаблонов соответствия, но проект по-прежнему ограничен в своем наборе функций.
На основе ответа attekei для 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считывает эти 1s и -n1означает, что он передает каждый из них в качестве аргумента для нового выполнения osascript(где он будет проигнорирован).
tab.title.includes(argv[0])в качестве условного условия я могу сопоставить заголовок страницы, который может быть менее привередливым, чем URL, и работает при использовании локального сервера, а не file: //.
(function() {
setTimeout(function(){
window.location.reload(true);
}, 100);
})();
Сохраните этот код в файле livereload.js и включите его внизу HTML-скрипта, например:
<script type="text/javascript" src="livereload.js"></script>
Это будет обновлять страницу каждые 100 миллисекунд. Любые изменения, которые вы вносите в код, мгновенно видны глазам.
Хорошо, вот мое грубое решение Auto Hotkey (в Linux попробуйте Auto Key ). При нажатии сочетания клавиш сохранения активируйте браузер, нажмите кнопку перезагрузки , затем вернитесь в редактор. Я просто устал запускать другие решения. Не будет работать, если ваш редактор выполняет автосохранение.
^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
Автономное решение с использованием R
Этот код будет:
заставлять браузер обновляться каждый раз при сохранении изменений в .html-файле.
install.packages("servr") servr::httw(dir = "c:/users/username/desktop/")
Подобные решения существуют для Python и т. Д.
Добавьте это в свой HTML
<script> window.addEventListener('focus', ()=>{document.location = document.location})</script>
Пока вы редактируете, ваша страница браузера размывается, при переключении назад, чтобы посмотреть на нее, запускается событие focus и страница перезагружается.
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"