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

Question

所以它是2017年,在编码网站时,我们仍然需要编辑,保存,切换窗口,然后点击刷新.做一个小改动,然后重新做一遍.然后再次.再等等

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

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

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

Answer 1

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

在package.json文件中,您可以使用SCSS,自动修复它,uglify并缩小它和脚本,并控制它将输出到哪个文件夹,例如生产文件夹.

这是一个示例设置 package.json

{
    "name": "Sample build",
    "version": "1.0.0",
    "description": "New build",
    "author": "Author",
    "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

Answer 2

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

live-server和json-server。

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

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

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

提供带有数据库模式的 .json 文件，采用 json 格式，只需输入 $>json-server --watch mydb.json即可正常工作！

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

希望对您有帮助！