Vim'de bir HTML dosyasını düzenliyorum ve altındaki dosya değiştiğinde tarayıcının yenilenmesini istiyorum.
Dosyadaki değişiklikleri dinleyecek ve dosyadaki her değişikliği her kaydettiğimde sayfayı otomatik olarak yenileyecek bir Google Chrome eklentisi var mı? Firefox için XRefresh olduğunu biliyorum ama XRefresh'i hiç çalıştıramadım.
Bunu kendim yapmak için bir senaryo yazmak ne kadar zor olurdu?
Yanıtlar:
OSX kullanmadığınızı varsayıyorum? Aksi takdirde applecript ile şöyle bir şey yapabilirsiniz:
http://brettterpstra.com/watch-for-file-changes-and-refresh-your-browser-automatically/
Ayrıca, her x saniyede bir yeniden yüklemeyi belirtebileceğiniz "otomatik yenileme artı" adlı bir Chrome eklentisi de vardır:
https://chrome.google.com/webstore/detail/auto-refresh-plus/oilipfekkmncanaajkapbpancpelijih?hl=en
keywordiçin watch_keywordaşağıdaki doğrultusunda:if (URL of atab contains "#{keyword}") then
Saf JavaScript çözümü!
Aşağıdakileri eklemeniz yeterlidir <head>:
<script type="text/javascript" src="http://livejs.com/live.js"></script>
Nasıl? Sadece Live.js'yi ekleyin ve sunucuya ardışık HEAD istekleri göndererek yerel CSS ve Javascript dahil olmak üzere mevcut sayfayı izleyecektir. CSS'de yapılan değişiklikler dinamik olarak uygulanacak ve HTML veya Javascript değişiklikleri sayfayı yeniden yükleyecektir. Dene!
Nerede? Live.js, aksi ispatlanana kadar Firefox, Chrome, Safari, Opera ve IE6 + ile çalışır. Live.js, Ruby, Handcraft, Python, Django, NET, Java, Php, Drupal, Joomla veya neye sahip olsanız da kullandığınız geliştirme çerçevesinden veya dilden bağımsızdır.
Bu cevabı buradan neredeyse kelimesi kelimesine kopyaladım , çünkü bence şu anda kabul edilen cevaptan daha kolay ve daha genel.
php -S localhost:8080
python3 -m http.serveryanı sıra diğer diller / araçlar için daha birçok .
Güncelleme : Tincr öldü.
Tincr, altındaki dosya her değiştiğinde sayfayı yenileyecek bir Chrome uzantısıdır.
Fswatch ( brew install fswatch) yüklediğiniz varsayılarak, OS X için Handy Bash tek satırlık yazılım . Rasgele bir yol / dosya izler ve değişiklikler olduğunda etkin Chrome sekmesini yeniler:
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'
Burada fswatch hakkında daha fazla bilgi edinin: https://stackoverflow.com/a/13807906/3510611
Belgenize tek bir meta etiket ekleyerek, tarayıcıya belirli bir aralıkta otomatik olarak yeniden yükleme talimatı verebilirsiniz:
<meta http-equiv="refresh" content="3" >
Dokümanınızın head etiketinin içine yerleştirilen bu meta etiket, tarayıcıya her üç saniyede bir yenileme talimatı verecektir.
http://livereload.com/ - OS X için yerel uygulama, Windows için Alpha sürümü. Https://github.com/livereload/LiveReload2 adresinde açık kaynaklı
Kullanım lokmada dosya ve izlemek için Browsersync tarayıcısını yeniden.
Adımlar:
Komut satırında yürütün
npm install --save-dev gulp tarayıcı-senkronizasyonu
Aşağıdaki içeriklerle gulpfile.js oluşturun :
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);
});
Çalıştırmak
yudum servisi
HTML'yi düzenleyin, kaydedin ve tarayıcınızın yeniden yüklendiğini görün. Sihir, özel etiketin HTML dosyalarınıza anında yerleştirilmesiyle yapılır.
Bunun eski bir soru olduğunu biliyorum ama birine yardım etmesi durumunda, onu çözen bir yeniden yükleme npm paketi var.
Bir sunucuda çalıştırmıyorsanız veya hatayı aldıysanız Live.js doesn't support the file protocol. It needs http.
Sadece kurun:
npm install reload -g
ve sonra index.html dizininizde şunu çalıştırın:
reload -b
Değişikliklerinizi her kaydettiğinizde yenilenecek bir sunucu başlatacaktır.
Sunucuda veya başka herhangi bir yerde çalıştırmanız durumunda başka birçok seçenek var. Daha fazla ayrıntı için referansı kontrol edin!
OS x ve Chrome için Refreschro adında bir java uygulaması var. Yerel dosya sistemindeki belirli bir dosya kümesini izler ve bir değişiklik algılandığında Chrome'u yeniden yükler:
GNU / Linux üzerindeyseniz, Falkon adında oldukça güzel bir tarayıcı kullanabilirsiniz . Bu dayanıyor Qt WebEngine . Tıpkı Firefox veya Chromium gibi - tek fark, bir dosya güncellendiğinde sayfayı otomatik olarak yeniler. Otomatik yenileme, vim, nano veya atom, vscode, parantez, geany, mousepad vb. Kullanmanız fark etmez.
Arch Linux'ta Falkon'u oldukça kolay bir şekilde kurabilirsiniz:
sudo pacman -S falkon
İşte anlık paket.
Bazen kullandığım hızlı bir çözüm ekranı ikiye bölmek ve her değişiklik yapıldığında xD belgesine tıklamaktır.
<script>
document.addEventListener("click", function(){
window.location.reload();
})
</script>
Node.js'de, primus.js'yi (websockets) gulp.js + gulp-watch (sırasıyla bir görev çalıştırıcı ve değişiklik dinleyicisi) ile bağlayabilirsiniz, böylece gulp, tarayıcı pencerenizin html, js olduğunda yenilenmesi gerektiğini bilmesini sağlar. vb. değiştirin. Bu işletim sisteminden bağımsızdır ve onu yerel bir projede çalıştırıyorum.
Burada, sayfa web sunucunuz tarafından sunulur, diskten bir dosya olarak yüklenmez, bu aslında daha çok gerçek bir şeye benzer.
Bu benim için çalışıyor (Ubuntu'da):
#!/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
doneSen yüklemeniz gerekebilir Inotify ve xdotool (paketler sudo apt-get install inotify-tools xdotoolUbuntu) ve değişim argümanını gösteren --classtercih tarayıcısı ve terminal fiili adlarına.
Komut dosyasını açıklandığı gibi başlatın ve sadece index.html'yi bir tarayıcıda açın. Her vim'e kaydettikten sonra, betik tarayıcınızın penceresine odaklanır, pencereyi yeniler ve ardından terminale geri döner.
xdotool search --name 127.0.0.1 windowactivate key F5localhost üzerinde çalışmak için (127.0. Elbette sadece 0.1). Şimdi onu betiğe geri takmam gerekiyor.
Bulduğum en esnek çözüm , bir koruma sunucusuyla eşleştirilmiş krom LiveReload uzantısıdır .
Bir projedeki tüm dosyaları veya yalnızca belirttiğiniz dosyaları izleyin. Örnek bir Guardfile yapılandırması:
guard 'livereload' do
watch(%r{.*\.(css|js|html|markdown|md|yml)})
end
Olumsuz yanı, bunu proje başına ayarlamanız gerektiğidir ve Ruby'ye aşina iseniz yardımcı olur.
Tincr krom uzantısını da kullandım - ancak çerçevelere ve dosya yapılarına sıkı sıkıya bağlı görünüyor. (Bir jekyll projesi için tincr'i kablolamayı denedim, ancak değişiklikler için yalnızca tek bir dosyayı izlememe izin verdi, dahil etme, kısmi veya düzen değişikliklerini hesaba katmadı). Ancak Tincr, tutarlı ve önceden tanımlanmış dosya yapılarına sahip raylar gibi projelerde kutudan çıktığı gibi harika çalışır.
Tincr, yeniden yükleme için her şey dahil eşleşme modellerine izin verseydi harika bir çözüm olurdu, ancak proje özellik kümesinde hala sınırlıdır.
Attekei'nin OSX cevabına göre:
$ brew install fswatch
Bunları içine Chuck 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.");
}
Bu file://, ilk komut satırı argümanıyla başlayan ve biten ilk sekmeyi yeniden yükleyecektir. İstediğiniz gibi ince ayar yapabilirsiniz.
Son olarak böyle bir şey yapın.
fswatch -o ~/path/to/watch | xargs -n1 osascript -l JavaScript reload.scpt myindex.html
fswatch -oher satırda bir değişiklik olmak üzere her değişiklik olayında değişen dosya sayısını verir. Genellikle sadece yazdırılır 1. xargso 1ları okur ve -n1her birini argüman olarak yeni bir uygulamaya geçirdiği anlamına gelir osascript(nerede görmezden gelinir).
tab.title.includes(argv[0])Koşullu olarak kullanarak , URL'den daha az titiz olabilen sayfa başlığını eşleştirebilirim ve file: // yerine yerel bir sunucu kullanırken çalışır.
(function() {
setTimeout(function(){
window.location.reload(true);
}, 100);
})();
Bu kodu bir karaciğereload.js dosyasına kaydedin ve aşağıdaki gibi HTML komut dosyasının altına ekleyin:
<script type="text/javascript" src="livereload.js"></script>
Bunun yapacağı şey, sayfayı her 100 mili saniyede bir yenilemektir. Kodda yaptığınız herhangi bir değişiklik anında gözler tarafından görülebilir.
Tamam, işte benim ham Auto Hotkey çözümüm (Linux'ta Auto Key'i deneyin ). Ne zaman tasarrufu klavyeden kısayol preslenmiş alır, tarayıcıyı etkinleştirmek tıklayın yeniden geri editöre geçiş düğmesine. Diğer çözümleri çalıştırmaktan bıktım. Düzenleyiciniz otomatik kaydetme yaparsa çalışmayacaktır.
^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 kullanarak çevrimdışı çözüm
Bu kod:
.html dosyasına her değişiklik kaydedildiğinde tarayıcının yenilenmesini sağlayın.
install.packages("servr") servr::httw(dir = "c:/users/username/desktop/")
Python vb. İçin benzer çözümler mevcuttur.
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' "
ardından izlemek istediğiniz dizini girin ve "watch_refresh_chrome" komutunu çalıştırın