Я редактирую HTML файл в Vim, и я хочу, чтобы браузер обновлялся всякий раз, когда изменяется файл под ним.
Есть ли плагин для Google Chrome, который будет прослушивать изменения в файле и автоматически обновлять страницу каждый раз, когда я сохраняю изменения в файле? Я знаю, что XRefresh для Firefox, но я не мог запустить XRefresh вообще.
Насколько тяжело было бы написать script, чтобы сделать это сам?
Я полагаю, вы не на OSX? В противном случае вы могли бы сделать что-то вроде этого с appleScriptcript:
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
Чистое решение 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 или что у вас есть.
Я скопировал этот ответ почти дословно отсюда, потому что я думаю, что он проще и более общий, чем принятый здесь ответ здесь.
Tincr - это расширение Chrome, которое обновляет страницу всякий раз, когда изменяется файл под ним.
Удобный 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: fooobar.com/questions/32120/...
http://livereload.com/ - собственное приложение для OS X, версия Alpha для Windows. Open sourced at https://github.com/livereload/LiveReload2
С добавлением одного метатега в ваш документ вы можете поручить браузеру автоматически перезагружать с заданным интервалом:
<meta http-equiv="refresh" content="3" >
Размещенный в теге заголовка вашего документа, этот метатег будет инструктировать браузер обновляться каждые три секунды.
Расширение LivePage Chrome можно легко настроить для отслеживания изменений в локальных файлах.
Используйте 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);
});
Run
gulp служат
Отредактируйте HTML, сохраните и просмотрите перезагрузку браузера. Магия осуществляется путем "на лету" инъекции специального тега в ваши HTML файлы.
Существует приложение java для os x и Chrome под названием Refreschro. Он будет отслеживать заданный набор файлов в локальной файловой системе и перезагружать Chrome при обнаружении изменения:
Протестирован первый вариант для Win7 64, Firefox10.0.2 и Chrome версии 24.0.1312.57 м. Хорошее обходное решение пока. Не забудьте удалить почтовую продукцию.
В node.js вы можете подключить primus.js(websockets) с помощью gulp.js + gulp -watch (бегун задачи и прослушиватель изменений соответственно), чтобы gulp позволял ваше окно браузера знает, что оно должно обновляться всякий раз, когда html, js и т.д. меняются. Это агностик OS, и я работаю в локальном проекте.
Здесь страница обслуживается вашим веб-сервером, а не загружается как файл с диска, что на самом деле больше похоже на реальную вещь.
Самое гибкое решение, которое я нашел, это chrome LiveReload расширение в паре с
Это работает для меня (в 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}" "[email protected]"; 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 на фактические имена вашего предпочтительного браузера и терминал.
Запустите script, как описано, и просто откройте index.html в браузере. После каждого сохранения в vim script будет сфокусировать ваше окно браузера, обновить его и затем вернуться к терминалу.
Это можно сделать с помощью простого python script.
Подробную информацию можно найти здесь.
Быстрое решение, которое я иногда использую, состоит в том, чтобы разделить экран на две части, и каждый раз, когда вносятся изменения, нажимайте на документ xD.
<script>
document.addEventListener("click", function(){
window.location.reload();
})
</script>
Я знаю, что это старый вопрос, но в случае, если он кому-то помогает, есть пакет npm для перезагрузки, который решает его.
В случае, если вы не запускаете его на сервере или получили ошибку, Live.js doesn't support the file protocol. It needs http. Live.js doesn't support the file protocol. It needs http.
Просто установите его:
npm install reload -g
и затем в вашем каталоге index.html запустите:
reload -b
Запустится сервер, который будет обновляться каждый раз, когда вы сохраняете свои изменения.
Есть много других вариантов на случай, если вы запускаете его на сервере или что-то еще. Проверьте ссылку для более подробной информации!
Установите и настройте chromix
Теперь добавьте это в свой .vimrc
autocmd BufWritePost *.html,*.js,*.css :silent ! chromix with http://localhost:4500/ reload
измените порт на то, что вы используете
На основе ответа 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 читает те 1 in и -n1 означает, что он передает каждый в качестве аргумента в новое выполнение osascript (где он будет игнорироваться).
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"
(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
Если вы используете GNU/Linux, вы можете использовать довольно крутой браузер, который называется Falkon. Он основан на Qt WebEngine. Это так же, как Firefox или Chromium - за исключением того, что он автоматически обновляет страницу при обновлении файла. Автообновление не имеет большого значения, используете ли вы vim, nano или atom, vscode, скобки, geany, коврик для мыши и т.д.
В Arch Linux вы можете легко установить Falkon:
sudo pacman -S falkon
Здесь пакет оснастки.