2017 年 HTML/CSS 的实时重新加载/刷新解决方案 [关闭]

Question

现在是 2017 年，在编写网站代码时，我们仍然需要编辑、保存、切换窗口，然后点击刷新。做一个小的改变，然后重新做一遍。然后再次。再等等等等。

我是否遗漏了什么，因为现在肯定有一个解决方案，浏览器可以在我们键入时自动更新，或者至少在我们点击保存时立即更新？

jsbin.com 是我在本地 Apache (Windows 10) 设置中寻找的完美工作示例。我尝试了各种方法，包括LiveReload 和LiveJS，但它们太啰嗦了，而且通常会有大约 2-4 秒的延迟，这在构建网站时还不够快。他们还需要一个浏览器扩展或一个插入到每个需要监控的页面中的代码 sn-p。这一切看起来都非常“老套”，非常 1990 年代。

我很好奇其他开发人员如何处理这个问题？现在有没有我没有遇到过的 NodeJS 解决方案，或者其他人只是在做编辑、保存、切换、刷新方法？确定不是吗？作为参考，我使用 Atom 编辑我的 html/css/js 文件等，然后在 Chrome 中保存并查看更改。任何想法或想法将不胜感激。实际上非常感谢。

Answer 1

注意：live-server 自 2018 年 11 月 26 日起未更新。

---

live-server 和 json-server。

Live-server 能够让您即时将应用程序封装在 Web 服务器 (nodejs) 下，并将所有源代码实时重新加载到您的浏览器（通过 webSocket）。

只需在您的项目文件夹中输入$> live-server 即可！

您可以将它与 json-server 结合使用，它为您提供了一种非常简单的方法来从 JSON 文件创建带有 json 键和值的 CRUD REST API。

提供一个带有 DB Schemas 的 .json 文件，采用 json 格式，只需输入 $> json-server --watch mydb.json，它也可以正常工作！

2 分钟的时间为您提供了一个具有实时重新加载功能和自定义去中心化 API 的网络服务器。

希望对你有所帮助！

Answer 2

使用 task-runner 绝对是每个有自尊的开发者的基础。

在我看来，最好的办法是为您的项目设置一个 Gulp，并与 Browser-Sync 配对。它可以设置为侦听您正在使用的每种类型的文件中的更改，从而最大限度地减少猜测哪些已更改和哪些未更改的麻烦。

您可以找到有关如何执行此操作的简洁教程here on CSS Tricks.

[2019 年 12 月 17 日更新]：

更好的方法是使用 live-reload，即使用名为 live-server 的 npm 插件。

您只需打开项目的父目录，例如parent-dir/ 您的项目所在的位置，例如parent-dir/project。然后，您打开一个终端并输入：

live-server project

按 Enter，您的项目将在您的默认浏览器窗口中打开。

注意：如果您打算使用 npm，则需要 nodejs。

Answer 3

我放弃了 gulp，现在只使用 npm 脚本https://www.npmjs.com/

在package.json 文件中，您可以使用 SCSS、自动添加前缀、丑化和缩小它以及您的脚本，并控制它将输出到哪些文件夹，例如生产文件夹。

这是package.json 中的示例设置

{
    "name": "Sample build",
    "version": "1.0.0",
    "description": "New build",
    "author": "Stefan Bobrowski",
    "license": "MIT",
    "main": "index.html",
    "scripts": {
        "autoprefixer": "postcss -u autoprefixer -r production/css/*.css",
        "scss": "node-sass --output-style expanded --indent-width 4 -o production/css development/scss",
        "uglify": "uglifyjs development/js/*.js -m -o production/js/scripts.js",
        "serve": "browser-sync start --server --files \"production/css/*.css, production/js/*.js\"",
        "build:css": "npm run scss && npm run autoprefixer",
        "build:js": "npm run uglify",
        "build:all": "npm run build:css && npm run build:js",
        "watch:css": "onchange \"development/scss\" -- npm run build:css",
        "watch:js": "onchange \"development/js\" -- npm run build:js",
        "watch:all": "npm-run-all -p serve watch:css watch:js",
        "start": "npm run build:all && npm run watch:all"
    },
    "devDependencies": {
        "node-sass": "^4.5.0",
        "postcss-cli": "^3.0.0-beta",
        "autoprefixer": "^6.7.6",
        "browser-sync": "^2.18.8",
        "npm-run-all": "^4.0.2",
        "onchange": "^3.2.1",
        "uglify-js": "^2.8.3"
    }
}

以及对应的文件结构设置：

Project
|__ development
|       |____ js
|       |____ scss
|
|__ production
|        |___ js
|        |___ css
|        |___ images
|
|_ index.html
|_ package.json

开发者只需运行npm install，然后运行npm start