2017年为HTML/CSS实时刷新/刷新解决方案

因此，2017年和编码网站时，我们仍然需要编辑，保存，切换窗口，然后点击刷新。做一个小小的改变，重新做一遍。然后再次。并再次等等等等2017年为HTML/CSS实时刷新/刷新解决方案

我失去了一些东西，因为肯定有一个解决方案，现在由此当我们输入浏览器可以自动更新，或者至少作为瞬间我们打救？

jsbin.com就是我正在寻找我本地的Apache（视窗10）设置的完美工作的例子。我尝试了各种方法，包括LiveReload和LiveJS，但它们太冗长，往往会有2-4秒的滞后时间，这在构建网站时不够快。他们还需要在每个需要监控的页面中插入一个浏览器扩展或一段代码。这一切似乎都非常“黑客”，而且非常像1990年代。

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

来源

2017-05-05 Ben Clarke

大多数的WebPack模板做这（在技术上这是一个节点解决方案）。 JS的热门替代品是即时更新，但实时更新CSS是即时可靠的。像[this]（https://github.com/facebookincubator/create-react-app）和[this]（https://github.com/vuejs-templates/webpack） – Matt

如果你只是在做HTML，CSS ，并且我会推荐brackets.io。它具有每次更改时更新的实时预览功能，而且它也是开源的。 – RBCunhaDesign

插入'meta'标记[]（https://www.w3schools.com/tags/att_meta_http_equiv.asp） – AvrilAlejandro

live-server和json-server。

直播服务器，你可以即时包装你在Web服务器（的NodeJS）应用程序和现场重装所有来源（通过WebSocket的）到你的浏览器。

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

可以在夫妇JSON的服务器，谁给你一个很死的简单的方法来创建CRUD的REST API，使用JSON键和值，从JSON文件中使用此。

提供的DB模式提供一种以.json文件，以JSON格式，只需要输入$>json-server --watch mydb.json和正常工作呢！

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

希望能帮到你！

来源

2017-05-05 14:16:37 john

Live-server对于html/css来说看起来不错，但是它不会打开我的php索引文件？从阅读GitHub页面我认为它只是html/css/js。这是一种耻辱，因为它设置起来如此轻而易举，并与html/css很好地工作，所以接近完美！:)无论如何谢谢你。 –

使用task-runner对于每位有自尊心的开发人员都是绝对必要的。

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

你可以找到关于如何做到这一点here on CSS Tricks.

来源

2017-05-05 14:29:54 snkv

我放弃了一口整齐的教程，现在只需使用NPM脚本https://www.npmjs.com/

权在package.json文件，你可以使用SCSS，autoprefix它，丑化并缩小它和您的脚本，并控制它将输出到哪些文件夹，例如生产文件夹。

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

来源

2017-05-05 15:14:30 StefanBob

2017年为HTML/CSS实时刷新/刷新解决方案

回答

相关问题