☰

如何让 HTML/CSS 更改在 Windows 下的浏览器中自动重新加载？

tag-icon • tag-icon windows firefox
如何让 HTML/CSS 更改在 Windows 下的浏览器中自动重新加载？

我正在对 HTML/CSS 进行更改。它们应该在我的 Firefox 浏览器中自动刷新/显示。

我是否需要一个特殊的编辑器来做这个？如果不需要，我该如何设置？

答案1

使用 LiveReload 应用

执行此操作的应用程序/插件是实时重载。

LiveReload 监视文件系统中的更改。保存文件后，它会根据需要进行预处理，并刷新浏览器。更酷的是，当您更改 CSS 文件或图像时，浏览器会立即更新，而无需重新加载页面。

但是，该应用程序/插件已经有一段时间没有更新了。

使用grunt实时重新加载服务器

你可以做的是运行一个服务器，例如grunt-contrib-connect以及一个监视文件更改的插件，例如grunt-contrib-watch。服务器将 JavaScript 注入到您的 HTML 页面中，以便监视的文件中的更改触发网站重新加载。

首先，安装Node.js然后从命令行转到您的项目文件夹（HTML 文件所在的位置）并运行：

npm install grunt grunt-contrib-watch grunt-contrib-connect --save-dev

创建一个名为的文件Gruntfile.js并添加以下内容：

module.exports = function(grunt) {
    grunt.initConfig({
      watch: {
        files: ['**/*'],
        options: {
          livereload: true,
        },
      },
      connect: {
            server: {
                options: {
                  livereload: true,
                }
          }
      }
    });

    grunt.loadNpmTasks('grunt-contrib-watch');
    grunt.loadNpmTasks('grunt-contrib-connect');

    grunt.registerTask('default', ['connect:server', 'watch']);
};

保存并运行以下命令：

grunt

现在导航到http://localhost:8000/— 当资产发生改变时，它们将触发 HTML 的重新加载。

看看grunt-contrib-connect和grunt-contrib-watch更多配置选项的文档。

答案2

另一个程序是括号，它反映了编辑的即时性（视频)，但目前可能仅支持 Chrome。

答案3

此 Firefox 插件可监视 CSS 文件的更改，并在 CSS 文件更改时重新加载文件而不重新加载 HTML。此插件不需要您的编辑器插件。

免责声明：我是这个插件的作者，我创建它专门是为了解决 OP 遇到的相同问题。

答案4

当您在 notepad++ 中编辑文件时，只需按 cntrl S 即可在更改后保存。

下载 Firefox 扩展以实现自动刷新

（有很多可用）和将计时器设置为 1 秒。

现在，无论何时您按下 cntrl S 来保存更改，Web 浏览器都会按照您设置的时间间隔刷新，并重新加载您上次保存的更改。

相关内容