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

时间:2017-05-05 14:03:31

标签: javascript html css node.js browser-sync

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

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

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

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

3 个答案:

答案 0 :(得分:8)

我放弃了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

答案 1 :(得分:1)

live-serverjson-server

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

只需在项目文件夹中输入$> live-server就可以了!

你可以和json-server一起使用它,json-server为你提供了一个非常简单的方法,用JSON文件创建带有json密钥和值的CRUD REST API。

以json格式提供带有数据库架构的.json文件,只需键入$> json-server --watch mydb.json它也可以正常使用!

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

希望能帮到你!

答案 2 :(得分:1)

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

在我看来,您最好的选择是为您的项目设置 Gulp ,与 Browser-Sync 配对。它可以设置为侦听您正在使用的每种类型文件的更改,从而最大限度地减少猜测更改内容和不更改内容的麻烦。

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