我正在Vim中编辑一个HTML文件，我想让浏览器在下面的文件发生变化时刷新。
是否有适用于Google Chrome的插件会监听文件的更改，并在每次保存对文件的更改时自动刷新页面？我知道有适用于Firefox的XRefresh但我无法让XRefresh运行。
写一个脚本来做这件事有多难？
答案 0 :(得分：45)
纯JavaScript解决方案！
<强> Live.js
只需将以下内容添加到<head>：
<script type="text/javascript" src="http://livejs.com/live.js"></script>
如何？ 只需包含Live.js，它将通过向服务器发送连续的HEAD请求来监控当前页面，包括本地CSS和Javascript。 CSS的更改将动态应用，HTML或Javascript更改将重新加载页面。试试吧！
在哪儿？ Live.js适用于Firefox，Chrome，Safari，Opera和IE6 +，直到证明不是这样。 Live.js独立于您使用的开发框架或语言，无论是Ruby，Handcraft，Python，Django，.NET，Java，Php，Drupal，Joomla还是您有什么。
我几乎逐字地从here复制了这个答案，因为我认为这比现在接受的答案更简单，更通用。
答案 1 :(得分：24)
我假设你不在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
答案 2 :(得分：22)
Tincr是Chrome扩展程序，只要下面的文件发生变化，它就会刷新页面。
答案 3 :(得分：11)
http://livereload.com/ - 适用于OS X的原生应用，适用于Windows的Alpha版本。开源于https://github.com/livereload/LiveReload2
答案 4 :(得分：9)
OS X的Handy Bash单行程序，假设您已安装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
答案 5 :(得分：8)
通过在文档中添加单个元标记，您可以指示浏览器按照提供的时间间隔自动重新加载：
<meta http-equiv="refresh" content="3" >
此元标记位于文档的head标记内，将指示浏览器每三秒刷新一次。
答案 6 :(得分：4)
可以轻松设置LivePage Chrome扩展程序以监控本地文件的更改。
答案 7 :(得分：3)
os x和Chrome有一个名为Refreschro的java应用程序。它将监视本地文件系统上的一组给定文件，并在检测到更改时重新加载Chrome：
答案 8 :(得分：2)
使用Gulp观看文件，Browsersync重新加载浏览器。
步骤如下：
在命令行中执行
npm install --save-dev gulp browser-sync
使用以下内容创建 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);
});
运行
gulp serve
编辑HTML，保存并查看您的浏览器重新加载。魔术是通过在您的HTML文件中实时注入特殊标记来完成的。
答案 9 :(得分：1)
这对我有用（在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
您可能需要在Ubuntu中安装 inotify 和 xdotool 包（sudo apt-get install inotify-tools xdotool）并将--class的args更改为实际的名称您首选的浏览器和终端。
按照描述启动脚本，然后在浏览器中打开index.html。每次在vim中保存后，脚本将聚焦浏览器的窗口，刷新它，然后返回终端。
答案 10 :(得分：1)
在node.js中，你可以使用gulp.js + gulp-watch（分别是任务运行器和更改侦听器）连接primus.js（websockets），这样gulp就可以让你的浏览器窗口知道它应该随时刷新html，js等，改变。这是操作系统不可知的，我让它在本地项目中工作。
在这里，页面由您的Web服务器提供，而不是作为磁盘上的文件加载，这实际上更像是真实的。
答案 11 :(得分：1)
答案 12 :(得分：1)
我发现的最灵活的解决方案是chrome LiveReload extension与guard server配对。
观察项目中的所有文件，或仅查看您指定的文件。以下是Guardfile配置示例：
guard 'livereload' do
watch(%r{.*\.(css|js|html|markdown|md|yml)})
end
缺点是你必须为每个项目设置它，如果你熟悉ruby它会有所帮助。
我还使用了Tincr chrome扩展 - 但它似乎与框架和文件结构紧密耦合。 （我尝试将tincr连接到一个jekyll项目，但它只允许我观察单个文件的更改，而不是考虑包含，部分或布局更改）。但是，Tincr开箱即用，其中包括具有一致和预定义文件结构的rails等项目。
如果Tincr允许所有包含匹配模式进行重新加载，那么Tincr将是一个很好的解决方案，但该项目的功能集仍然有限。答案 13 :(得分：1)
如果您使用的是 Visual Studio 代码（我强烈推荐用于 Web 开发），那么 Ritwick Dey 的名为 Live Server 的扩展程序的下载量超过 900 万次。只需安装它（建议在此之后重新启动 vs code），然后只需右键单击您的主 HTML 文件，将有一个选项“使用 Live Server 打开”，单击它，您的网站将在浏览器中自动打开本地服务器。
答案 14 :(得分：1)
我有时使用的一种快速解决方案是将屏幕分为 两个，每次进行更改时，单击文档xD。
<script>
document.addEventListener("click", function(){
window.location.reload();
})
</script>
答案 15 :(得分：1)
如果您使用的是GNU / Linux，则可以使用名为Falkon的漂亮浏览器。它基于Qt WebEngine。就像Firefox或Chromium一样，只是更新文件时会自动刷新页面。无论您使用vim，nano还是atom，vscode，括号，geany，mousepad等，自动刷新都无关紧要。
在Arch Linux上，您可以轻松安装Falkon：
sudo pacman -S falkon
Here's snap软件包。
答案 16 :(得分：0)
以下几行可以解决问题：
var bfr = '';
setInterval(function () {
fetch(window.location).then((response) => {
return response.text();
}).then(r => {
if (bfr != '' && bfr != r) {
window.location.reload();
}
else {
bfr = r;
}
});
}, 1000);
这会在每一秒后将当前响应文本与先前缓冲的响应文本进行比较，如果源代码有任何更改，则会重新加载页面。如果您只是开发轻量级页面，则不需要任何重载插件。
答案 17 :(得分：0)
将此添加到您的“头部”部分。 将时间从 3000 毫秒更改为您喜欢的任何值。 每 3 秒重新加载一次 html 文件的小技巧。当我使用 vim + 浏览器设置进行 JS 开发时，这对我很有用。
<script>
function autoreload() {
location.reload();
}
setInterval(autoreload, 3000);
</script>
答案 18 :(得分：0)
如果您的计算机上安装了Node，则可以使用light-server。
设置1：使用命令npm install -g light-server
步骤2：当前工作目录是包含静态HTML页面的文件夹时，请使用命令npx light-server -s . -p 5000 -w "*.css # reloadcss" -w "*.html # reloadhtml" -w "*.js # reloadjs"
步骤3：在浏览器中打开位于http：// localhost：5000
的网页在步骤2，
可以使用-p开关更改端口
可以使用-w开关更改正在观看的文件
可以使用-s开关更改服务器目录
light-server的文档位于https://www.npmjs.com/package/light-server
答案 19 :(得分：0)
将此添加到您的HTML
<script> window.addEventListener('focus', ()=>{document.location = document.location})</script>
在编辑时，浏览器页面变模糊，方法是切换回查看，从而触发焦点事件并重新加载页面。
答案 20 :(得分：0)
使用R的离线解决方案
此代码将：
使每次将更改保存到.html文件时刷新浏览器。
install.packages("servr") servr::httw(dir = "c:/users/username/desktop/")
对于python等，存在类似的解决方案。
答案 21 :(得分：0)
我知道这是一个老问题，但是如果有帮助，可以使用reload npm软件包来解决。
如果您不在服务器上运行它或收到错误Live.js doesn't support the file protocol. It needs http.
只需安装：
npm install reload -g
，然后在您的index.html目录中，运行：
reload -b
它将启动一个服务器，该服务器将在您每次保存更改时刷新。
如果在服务器或其他任何设备上运行它，还有许多其他选项。检查参考以获取更多详细信息！
答案 22 :(得分：0)
好的，这是我粗略的Auto Hotkey解决方案（在Linux上，请尝试Auto Key）。当按下保存键盘快捷键时，激活浏览器，单击 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
答案 23 :(得分：0)
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”
答案 24 :(得分：0)
基于askei对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表示它将每一个作为参数传递给With Rows(pRow).Interior
.ColorIndex = 6
End With
的新执行（将被忽略）。
答案 25 :(得分：0)
安装并设置chromix
现在将其添加到您的.vimrc
autocmd BufWritePost *.html,*.js,*.css :silent ! chromix with http://localhost:4500/ reload
将端口更改为您使用的端口
答案 26 :(得分：-1)
(function() {
setTimeout(function(){
window.location.reload(true);
}, 100);
})();
将此代码保存到文件 livereload.js 中，并将其包含在HTML脚本的底部，如下所示：
<script type="text/javascript" src="livereload.js"></script>
此操作是每100毫秒刷新一次页面。您对代码所做的任何更改都可以立即被肉眼看到。