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

因此，它是2017年，在编码网站时，我们仍然必须编辑，保存，切换窗口，然后点击刷新。做出一个小的改变，然后再做一次。然后再次。再次等等。

我缺少某些东西，因为现在有一个解决方案，即浏览器可以在我们键入时自动更新，或者至少在我们点击时立即更新？

jsbin.com是我在本地Apache(Windows 10(设置上寻找的完美示例。我尝试了各种方法，包括livereload和livejs，但它们的速度太长，而且通常有大约2-4秒的滞后，在构建网站时的滞后还不够快。他们还需要浏览器扩展程序或插入需要监视的每个页面的代码段。这一切似乎都非常" hacky"和1990年代。

我很好奇其他开发人员如何处理此问题？现在是否有一个我没有遇到的NodeJS解决方案，还是其他所有人只是在进行编辑，保存，切换，刷新方法？肯定不是吗？作为参考，我使用原子来编辑我的HTML/CSS/JS文件等，然后保存并查看Chrome中的更改。任何想法或想法都将不胜感激。实际上非常感谢。

edit (3/25/2022(

我只会使用Create React App：https：//create-react-app.dev/

否则我已经创建并使用了修改后的create React App模板的修改并删除版本：https：//github.com/stefanbobrowski/template，还包括连接的React-Router，Usecontext Global State，scsss and SCSSS和SCSS。

我丢下了Gulp，现在只使用NPM脚本https://www.npmjs.com/

就在package.json文件中，您可以使用SCSS，自动将其自动改装，uglify和knikifify and your脚本，并控制它将输出的文件夹，例如生产文件夹。

这是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

注意： live-server自2018年11月26日以来就没有更新。

Live-Server和Json-Server。

Live-Server您能够在Web服务器(NODEJS(下立即包装应用程序，并实时填充所有源到您的浏览器(通过WebSocket(。

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

您可以将其与JSON-Server夫妇使用，后者为您提供了一种非常简单的简单方法，可以从JSON文件中使用JSON键和值来创建CRUD REST API。

以JSON格式提供DB架构的.json文件，只需键入$＆gt; json-server --watch mydb.json，它也可以很好！

您的时间2分钟为您提供了一个具有实时填充功能和自定义分散API的网络服务器。

希望对您有帮助！

使用 task-runner 对于每个自尊开发人员来说都是至关重要的。

我认为，您最好的选择是为您的项目设置 GULP ，并与> browser-sync 配对。可以将其设置为聆听所使用的每种文件中的每种类型的更改，最大程度地减少猜测什么变化和没有变化的麻烦。

您可以在CSS技巧上找到有关如何执行此操作的整洁教程。

[更新12/17/2019] ：

更好的方法是使用Live-Reload是使用称为 Live-Server 的NPM插件。

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


live-server project

命中输入，您的项目将在您的默认浏览器窗口中打开。

注意：如果您打算使用 npm 。。。

相关内容

最新更新

热门标签：