Javascript 2017年HTML/CSS实时重新加载/刷新解决方案

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

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

这是我在本地Apache（Windows 10）设置中寻找的一个完美的工作示例。我尝试过各种方法，包括和，但是它们太冗长了，通常会有2-4秒的延迟，这在构建网站时不够快。它们还需要一个浏览器扩展或在每个需要监控的页面中插入一段代码。这一切看起来都很“黑”，而且是在20世纪90年代

---

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

注意：

直播服务器自2018年11月26日以来一直未更新


和

Live server使您能够即时将应用程序包装到web服务器（nodejs）下，并将所有源代码实时重新加载到浏览器中（通过webSocket）

只需在项目文件夹中键入
$>live server
，它就可以工作了

您可以将其与json服务器结合使用，json服务器为您提供了一种非常简单的方法来从json文件创建CRUDRESTAPI，其中包含json键和值

以json格式提供一个带有DB模式的.json文件，只需键入$>
json服务器——查看mydb.json
，它也可以正常工作

2分钟的时间为您提供了一个具有实时重新加载功能和自定义分散API的web服务器

希望对你有帮助
 使用对于每个有自尊心的开发人员来说是绝对基本的

在我看来，你最好的选择是为你的项目设置一个，并与配对。它可以设置为侦听您正在使用的每种类型的文件中的更改，从而最大限度地减少猜测更改内容和未更改内容的麻烦

您可以找到一个关于如何执行此操作的简洁教程

[更新日期：2019年12月17日]：

更好的方法是使用实时重新加载，即使用名为的npm插件

您只需打开项目所在的父目录，例如
parent dir/
，例如
parent dir/project
。然后，打开终端并键入：


live-server project

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

注意：如果您计划使用，您将需要

我放弃了吞咽，现在只使用npm脚本

就在
package.json
文件中，您可以使用SCS、autoprefix、uglify和minify以及您的脚本，并控制它将输出到哪些文件夹，例如生产文件夹

下面是
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安装
，然后
npm启动
大多数网页模板都会这样做（因此从技术上讲，这是一个节点解决方案）。JS的热替换是命中或未命中的，但实时更新CSS是即时和可靠的。如果你只是在做html、css和js，我建议使用括号.io。它有一个实时预览功能，每次有变化都会更新，而且它也是开源的。insert
meta
tag@BenClarke，这更像是2012年。您可能还不了解它，但您需要的是一个任务执行者。有关详细信息，请参见我的答案。@BenClarke阅读它的最佳位置是-它的目的是获取多个文件，其中一些文件可能与浏览器不兼容（例如SASS、ES6），并将其捆绑到浏览器可以加载的文件中。通常这包括缩小尺寸等。人们已经扩展了这个工具（及其）来做一些事情，比如在不刷新页面的情况下热加载样式。Live-server对于html/css来说似乎很棒，但它不会打开我的php索引文件？通过阅读GitHub页面，我认为它只是html/css/js。这是一个耻辱，因为它是如此容易设置，并与html/css工作得很好。太接近完美了！：）不管怎样，谢谢你。这太棒了。刚刚实现了一个版本的它有点现代化，但核心是那里。伟大的answer@tpinto谢谢，它在过去为我创造了奇迹。你是对的，我可能应该用更现代的软件包等更新这个。现在在2019年，我会推荐Parcel bundler。在没有配置的情况下，它可以处理绑定不同类型的文件，如SCS、开发服务器、热重新加载等。请查看此repo以了解简单的设置：这不一定是一个错误的答案，但已经有点过时了。@DaveKanter，duely指出。“对于每个有自尊心的开发人员来说，这是绝对必要的。”任务运行程序是一种工具，而且它并不适合所有的工作流。自尊不是来自于选择和使用时髦的工具。