Vim 在Chrome中保存对html文件的更改时自动重新加载浏览器？

我正在Vim中编辑一个HTML文件，我希望浏览器在下面的文件发生更改时刷新

Google Chrome是否有一个插件，可以在每次保存文件更改时监听文件更改并自动刷新页面？我知道Firefox有XRefresh，但我根本无法运行XRefresh

---

要自己写一个脚本来做这件事有多难？

我想你不在OSX上吧？否则，您可以使用applescript执行以下操作：

chrome还有一个名为“auto refresh plus”的插件，您可以指定每x秒重新加载一次：

---

-OS X的本机应用程序，Windows的Alpha版本。开源的

有一款针对os x和Chrome的java应用程序，名为Refreschro。它将监视本地文件系统上的一组给定文件，并在检测到更改时重新加载Chrome：

---

更新：Tincr已死亡

---

Tincr是一个Chrome扩展，每当下面的文件发生更改时，它都会刷新页面。

在node.js中，您可以将primus.js（websockets）与gulp.js+gulp watch（分别是一个任务运行程序和更改侦听器）连接起来，以便gulp让您的浏览器窗口知道，只要html、js等发生更改，它就会刷新。这是操作系统不可知论，我在一个本地项目中使用它

---

在这里，页面由您的web服务器提供服务，而不是作为文件从磁盘加载，这实际上更像是真实的东西。

我发现的最灵活的解决方案是将其与a配对

查看项目中的所有文件，或仅查看指定的文件。以下是Guardfile配置示例：

guard 'livereload' do
  watch(%r{.*\.(css|js|html|markdown|md|yml)})
end

缺点是您必须为每个项目设置此选项，如果您熟悉ruby，它会有所帮助

我也使用了Tincr chrome扩展，但它似乎与框架和文件结构紧密耦合。（我尝试为一个jekyll项目连接tincr，但它只允许我查看单个文件的更改，而不考虑包括、部分或布局更改）。然而，Tincr在像rails这样具有一致和预定义文件结构的项目中非常适合开箱即用

Tincr将是一个很好的解决方案，如果它允许重新加载所有包含的匹配模式，但该项目的功能集仍然有限

这对我很有用（在Ubuntu中）：

#/bin/bash
#
#监视作为参数传递给脚本的文件夹或文件，以及
#检测到更改，它会自动刷新当前选定的Chrome选项卡或
#窗户。
#
#用法：
#./chrome-refresher.sh/folder/to/watch
时间\u格式=“%F%H:%M”
输出格式='%T事件：%e为文件%w激发。令人耳目一新。”
而inotifywait--exclude'+\.swp$'-e modify-q\
-r—timefmt“${TIME\u FORMAT}”--格式“${OUTPUT\u FORMAT}”“$@”；做
xdotool搜索--仅可见--类激活--同步键F5\
搜索--仅可见--类gnome终端窗口激活
完成

您可能需要安装inotify和xdotool软件包（

sudo-apt-get-install-inotify-tools-xdotool

在Ubuntu中），并将

--class

的参数更改为首选浏览器和终端的实际名称

---

按照说明启动脚本，然后在浏览器中打开index.html。每次在vim中保存后，脚本将聚焦浏览器窗口，刷新它，然后返回到终端。

纯JavaScript解决方案

只需将以下内容添加到您的

：

怎么做？ 只需包含Live.js，它就会通过向服务器发送连续的HEAD请求来监控当前页面，包括本地CSS和Javascript。对CSS的更改将动态应用，HTML或Javascript更改将重新加载页面。试试看

在哪里？ js可以在Firefox、Chrome、Safari、Opera和IE6+中工作，除非另有证明。js独立于您使用的开发框架或语言，无论是Ruby、Handcraft、Python、Django、NET、Java、Php、Drupal、Joomla还是其他什么

---

我几乎是一字不差地从中复制了这个答案，因为我认为它比目前接受的答案更简单、更笼统。

在文档中添加一个元标记后，您可以指示浏览器按规定的时间间隔自动重新加载：

<meta http-equiv="refresh" content="3" >

---

放置在文档的head标记中，此meta标记将指示浏览器每三秒刷新一次。

这可以使用简单的python脚本完成

用于监视特定文件夹

在启用调试的情况下使用Chrome。刷新可以通过websocket连接完成

有关详细信息，请参阅。

安装和设置

现在将其添加到

.vimrc

autocmd BufWritePost *.html,*.js,*.css :silent ! chromix with http://localhost:4500/ reload

将端口更改为您用来查看文件和重新加载浏览器的端口

这些步骤是：

在命令行中执行

npm安装--保存开发人员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文件中动态注入特殊标记，可以实现这一神奇效果。

假设您已安装fswatch（

brew安装fswatch

），Handy Bash one liner for OS X。它监视任意路径/文件，并在发生更改时刷新活动的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的更多信息，请参见此处：

基于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.");
}

fswatch-o

输出在每个更改事件中更改的文件数，每行一个。通常它只打印

1

xargs

读取中的

1

s，而

-n1

意味着它将每个参数作为参数传递给新执行的

osascript

（将忽略）

那就开始吧

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.");
}

fswatch -o ~/path/to/watch | xargs -n1 osascript -l JavaScript reload.scpt myindex.html 

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' "

(function() {
    setTimeout(function(){
        window.location.reload(true);
    }, 100);
})();

<script type="text/javascript" src="livereload.js"></script>

<script>
document.addEventListener("click", function(){
    window.location.reload();
})
</script>

^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

npm install reload -g

reload -b

sudo pacman -S falkon

install.packages("servr")
servr::httw(dir = "c:/users/username/desktop/")

<script> window.addEventListener('focus', ()=>{document.location = document.location})</script>

    <script>
        function autoreload() {
            location.reload();
        }
        setInterval(autoreload, 3000);
    </script>