Question

有没有人知道我的项目文件发生变化时会自动刷新浏览器的插件或扩展程序？

我正在使用supervisor重启我的节点服务器。但每次我想做一个小改动时点击刷新都有点烦人：/

我正在使用的浏览器是OSX上最新版本的Chrome，我的编辑器是Sublime Text 2.

Answer 1

我连接gulp和gulp-watch通知我的浏览器端javascript重新加载页面，每当我更改前端javascript，html等...

像......那样的东西。

Primus  = require 'primus'
http    = require 'http'
logging = require './logging'

logSpark = (spark, message) -> 
  logging.logBlue('Spark ' + spark.id + ' from ' + spark.address.ip + ' ' + message + ' (now ' + sparks + ' total sparks active)')

# Start sparks server
server = http.createServer().listen(3000)
sparkServer = new Primus(server, { transformer: 'websockets' })
sparkServer.save('./public/script/primus.js');

logging.logBlue 'Sparks server listening on port ' + 3000 + '....'

sparks = 0

# Log spark connections
sparkServer.on('connection', (spark) -> 
  sparks += 1
  logSpark(spark, 'connected on port ' + spark.address.port))

sparkServer.on('disconnection', (spark) ->
  sparks -= 1
  logSpark(spark, 'disconnected'))

exports.broadcast = () -> sparkServer.write('refresh') # arbitrary message text here

在gulpfile.js中：

watch({glob: "public/*"}, function() {
    clientRefresh.broadcast()
});

加上html：

  <head>
    <script type='text/javascript' src='/script/main.js'></script>
    <script src="/script/primus.js"></script>
    <script>
      var primus = new Primus('http://localhost:3000');

      primus.on('data', function message(data) {
        console.log('@@@ refreshing by gulp ' + data + ' request @@@');
        document.location.reload(true);         
        });
    </script>
  </head>

我不熟悉supervisor，但我使用nodemon自动重启项目的后端，并且有一个脚本可以执行该操作并且启动gulp，它负责两种类型的自动重启（后端与nodemon），以及上面的前端）。

Answer 2

我围绕节点监视工具制作了一个包装器，以便在文件更改时刷新Web浏览器。如果你使用的是OS X，那么这个解决方案对你来说可能是一个单一的方法。

npm install -g watchme

将安装包装器。然后将此脚本保存在某处，例如~/refresh.applescript ...

# ~/refresh.applescript
tell application "Chrome" to tell the active tab of its first window
    reload
end tell

然后使用watchme在文件上查看特定文件夹/文件/正则表达式以进行任何更改。当它检测到更改时，执行applescript进行刷新。这基本上模拟了你正在寻找的保存刷新，并且完全独立于编辑器（即，无论是否在Sublime / Vim / Emacs上，你还在改变文件）

watchme app views web -e "osascript ~/refresh.applescript"

watchme程序可以更明确地使用，因为您可以使用javascript正则表达式来匹配项目中特定类型的任何文件。使用watchme --help查看其他功能。

Answer 3

您可以让您的节点服务器保持连接打开（即websocket），并在您的网页上写一些代码，以便当该连接终止（节点进程重新启动）时，页面调用window.location.reload（）< / p>

Answer 4

This answer 显示了一种自动执行重新加载扩展程序的方法。图示的技术可以与自定义Grunt任务，编辑器中的 onSave 挂钩或适合您的任何内容一起使用。

This other answer 显示了一种重新加载扩展程序和标签的方法（在使用内容脚本时很有用）。

自动刷新浏览器文件更改？

4 个答案: