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實時刷新/刷新解決方案

回答

相關問題