脚本刷新 js - Javascript (1)

📌 相关文章

📜 脚本刷新 js - Javascript (1)

📅 最后修改于: 2023-12-03 14:57:06.455000 🧑 作者: Mango

脚本刷新 js - Javascript

当我们进行开发或debug时，常常需要修改js脚本，但是每次修改完之后都需要手动刷新页面，这样操作繁琐且效率低下。

那么有没有一种方式可以在修改完脚本后自动刷新页面呢？这就是本文要介绍的内容——通过node.js + browser-sync实现自动刷新页面。

准备工作

// 全局安装browser-sync
npm install -g browser-sync

创建一个测试文件夹，在文件夹中创建一个html文件和一个js文件。

我的测试文件夹结构如下：

├── test
│   ├── index.html
│   └── test.js

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <h1 id="h1"></h1>
    <script src="test.js"></script>
</body>

</html>

test.js

var h1 = document.getElementById("h1");

setInterval(function() {
    h1.innerHTML = new Date();
}, 1000);

这是一个简单的页面，在h1标签中显示当前时间。

自动刷新页面

在测试文件夹的根目录下打开命令提示符或终端，输入以下命令：
```
browser-sync start --server --files "**/*.css, **/*.html, **/*.js"
```
--server表示以当前目录为服务器根目录，--files则表示监听相应的文件类型（注：星号表示监听该类型文件的所有目录）。
然后会弹出一个浏览器窗口，在浏览器中输入http://localhost:3000/test/index.html

此时页面会自动刷新，并显示当前的时间。
打开test.js，进行修改，保存文件。

此时页面会自动刷新，并显示修改后的结果。

总结

browser-sync是一款非常实用的工具，可以提高我们的开发、debug效率。我们只需一次性的配置，便可以大大减少手动刷新页面的次数，提高工作效率。