ฉันกำลังแก้ไขไฟล์ HTML ใน Vim และฉันต้องการให้เบราว์เซอร์รีเฟรชเมื่อใดก็ตามที่ไฟล์ข้างใต้มีการเปลี่ยนแปลง
มีปลั๊กอินสำหรับ Google Chrome ที่จะรับฟังการเปลี่ยนแปลงของไฟล์และรีเฟรชหน้าอัตโนมัติทุกครั้งที่บันทึกการเปลี่ยนแปลงลงในไฟล์หรือไม่ ฉันรู้ว่ามี XRefresh สำหรับ Firefox แต่ฉันไม่สามารถเรียกใช้ XRefresh ได้เลย
การเขียนบทเพื่อทำสิ่งนี้ด้วยตัวเองจะยากแค่ไหน?
คำตอบ:
ฉันถือว่าคุณไม่ได้ใช้ OSX? มิฉะนั้นคุณสามารถทำสิ่งนี้ด้วย applescript:
http://brettterpstra.com/watch-for-file-changes-and-refresh-your-browser-automatically/
นอกจากนี้ยังมีปลั๊กอินสำหรับ chrome ที่เรียกว่า "auto refresh plus" ซึ่งคุณสามารถระบุการโหลดซ้ำได้ทุก ๆ x วินาที:
https://chrome.google.com/webstore/detail/auto-refresh-plus/oilipfekkmncanaajkapbpancpelijih?hl=th
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 หรือ what-have-you
ฉันคัดลอกคำตอบนี้เกือบทุกคำจากที่นี่เพราะฉันคิดว่ามันง่ายและกว้างกว่าคำตอบที่ยอมรับในปัจจุบันที่นี่
php -S localhost:8080
python3 -m http.serverรวมทั้งอื่น ๆ อีกมากมายสำหรับภาษาอื่น
อัปเดต : Tincr ตายแล้ว
Tincr เป็นส่วนขยายของ Chrome ที่จะรีเฟรชหน้าเมื่อใดก็ตามที่ไฟล์ข้างใต้มีการเปลี่ยนแปลง
Handy Bash one-liner สำหรับ 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 ติดตั้ง - บันทึก - 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
มันจะเริ่มเซิร์ฟเวอร์ที่จะรีเฟรชทุกครั้งที่คุณบันทึกการเปลี่ยนแปลงของคุณ
มีตัวเลือกอื่น ๆ อีกมากมายในกรณีที่คุณใช้งานบนเซิร์ฟเวอร์หรืออย่างอื่น ตรวจสอบข้อมูลอ้างอิงสำหรับรายละเอียดเพิ่มเติม!
มีแอป java สำหรับ os x และ Chrome ชื่อ Refreschro จะตรวจสอบชุดไฟล์ที่กำหนดบนระบบไฟล์ภายในเครื่องและโหลด Chrome ซ้ำเมื่อตรวจพบการเปลี่ยนแปลง:
ถ้าคุณอยู่ใน GNU / Linux คุณสามารถใช้เบราว์เซอร์เย็นสวยที่เรียกว่าFalkon มันขึ้นอยู่กับQt WebEngine เช่นเดียวกับ Firefox หรือ Chromium ยกเว้นว่าจะรีเฟรชหน้าเว็บอัตโนมัติเมื่ออัปเดตไฟล์ การรีเฟรชอัตโนมัติไม่สำคัญมากนักไม่ว่าคุณจะใช้ vim, nano หรือ atom, vscode, brackets, geany, mousepad เป็นต้น
บน Arch Linux คุณสามารถติดตั้ง Falkon ได้อย่างง่ายดาย:
sudo pacman -S falkon
นี่คือแพ็คเกจ snap
วิธีแก้ปัญหาอย่างรวดเร็วที่บางครั้งฉันใช้คือการแบ่งหน้าจอออกเป็นสองส่วนและทุกครั้งที่มีการเปลี่ยนแปลงให้คลิกที่เอกสาร xD
<script>
document.addEventListener("click", function(){
window.location.reload();
})
</script>
ใน node.js คุณสามารถวางสาย primus.js (websockets) ด้วย gulp.js + gulp-watch (ตัววิ่งงานและเปลี่ยนผู้ฟังตามลำดับ) เพื่อให้อึกช่วยให้หน้าต่างเบราว์เซอร์ของคุณรู้ว่าควรรีเฟรชเมื่อใดก็ตามที่ 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 ในเบราว์เซอร์ หลังจากบันทึกเป็นกลุ่มสคริปต์จะโฟกัสหน้าต่างเบราว์เซอร์ของคุณให้รีเฟรชแล้วกลับไปที่เทอร์มินัล
xdotool search --name 127.0.0.1 windowactivate key F5สำหรับการทำงานบน localhost (127.0.1) 0.1) เท่านั้นแน่นอน ตอนนี้ฉันต้องเสียบกลับเข้าไปในสคริปต์
การแก้ปัญหาความยืดหยุ่นมากที่สุดที่ฉันได้พบเป็นส่วนขยายของ Chrome LiveReloadจับคู่กับเซิร์ฟเวอร์ยาม
ดูไฟล์ทั้งหมดในโปรเจ็กต์หรือเฉพาะไฟล์ที่คุณระบุ นี่คือตัวอย่างการกำหนดค่า Guardfile:
guard 'livereload' do
watch(%r{.*\.(css|js|html|markdown|md|yml)})
end
ข้อเสียคือคุณต้องตั้งค่านี้ต่อโครงการและจะช่วยได้หากคุณคุ้นเคยกับทับทิม
ฉันยังใช้ส่วนขยาย Tincr chrome - แต่ดูเหมือนว่าจะเชื่อมโยงกับเฟรมเวิร์กและโครงสร้างไฟล์อย่างแน่นหนา (ฉันลองเดินสาย tincr สำหรับโปรเจ็กต์ jekyll แต่อนุญาตให้ฉันดูไฟล์เดียวสำหรับการเปลี่ยนแปลงเท่านั้นไม่รวมถึงการเปลี่ยนแปลงบางส่วนหรือเลย์เอาต์) อย่างไรก็ตาม Tincr ใช้งานได้ดีกับโครงการต่างๆเช่นรางที่มีโครงสร้างไฟล์ที่สอดคล้องกันและกำหนดไว้ล่วงหน้า
Tincr จะเป็นทางออกที่ดีหากอนุญาตให้ใช้รูปแบบการจับคู่แบบรวมทั้งหมดสำหรับการโหลดซ้ำ แต่โครงการยังคง จำกัด อยู่ในชุดคุณลักษณะ
สามารถทำได้โดยใช้สคริปต์ python แบบธรรมดา
จากคำตอบของ 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ในและ-n1หมายความว่ามันส่งผ่านแต่ละอันเป็นอาร์กิวเมนต์ไปยังการดำเนินการใหม่ของosascript(ซึ่งจะถูกละเว้น)
tab.title.includes(argv[0])เป็นเงื่อนไขฉันสามารถจับคู่กับชื่อหน้าซึ่งอาจจู้จี้จุกจิกน้อยกว่า URL และใช้ได้เมื่อใช้เซิร์ฟเวอร์ภายในแทนที่จะเป็นไฟล์: //
ติดตั้งและตั้งค่า chromix
ตอนนี้เพิ่มสิ่งนี้ในไฟล์ .vimrc
autocmd BufWritePost *.html,*.js,*.css :silent ! chromix with http://localhost:4500/ reload
เปลี่ยนพอร์ตตามที่คุณใช้
(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>
ในขณะที่คุณกำลังแก้ไขหน้าเบราว์เซอร์ของคุณจะเบลอเมื่อเปลี่ยนกลับไปดูเหตุการณ์โฟกัสจะเริ่มทำงานและโหลดหน้าซ้ำ
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"