修改服务器网站文件,在服务器上修改网站静态文件如何实时预览

使用 live-server 可以解决这个问题。 有时候在服务器修改文件，每次修改都要刷新一下，特别麻烦。今天知道了一个软件 live-server 可以很好的解决这样问题。

live-server 的安装需要使用 npm 。 因为 live-server 是npm下的一个工具。可以当做一个web服务器，类似于nginx,apache 。 该软件的最大特点是就是，当文件有变化的时候，可以自动的刷新浏览器。这样就可以很好的解决， 每次更新文件都要手动刷新后才能看到结果的这个问题。

live-server 安装

全局安装

npm install live-server -g

使用的方法

进入网站的目录，运行

live-server

然后输入服务器的ip:端口，就可以进行访问了。

工作的原理

可以看到通过 live-server 输出的页面底部自动增加了

//

if ('WebSocket' in window) {

(function() {

function refreshCSS() {

var sheets = [].slice.call(document.getElementsByTagName("link"));

var head = document.getElementsByTagName("head")[0];

for (var i = 0; i < sheets.length; ++i) {

var elem = sheets[i];

head.removeChild(elem);

var rel = elem.rel;

if (elem.href && typeof rel != "string" || rel.length == 0 || rel.toLowerCase() == "stylesheet") {

var url = elem.href.replace(/(&|\?)_cacheOverride=\d+/, '');

elem.href = url + (url.indexOf('?') >= 0 ? '&' : '?') + '_cacheOverride=' + (new Date().valueOf());

}

head.appendChild(elem);

}

}

var protocol = window.location.protocol === 'http:' ? 'ws://' : 'wss://';

var address = protocol + window.location.host + window.location.pathname + '/ws';

var socket = new WebSocket(address);

socket.onmessage = function(msg) {

if (msg.data == 'reload') window.location.reload();

else if (msg.data == 'refreshcss') refreshCSS();

};

console.log('Live reload enabled.');

})();

}

// ]]>

通过websock浏览器和服务器进行通信，如果服务器上文件发生了变量，浏览器就可以收到信号，然后自动刷新。

帮助信息

$live-server --help

Usage: live-server [-v|--version] [-h|--help] [-q|--quiet] [--port=PORT] [--host=HOST] [--open=PATH] [--no-browser] [--browser=BROWSER] [--ignore=PATH] [--ignorePattern=RGXP] [--no-css-inject] [--entry-file=PATH] [--spa] [--mount=ROUTE:PATH] [--wait=MILLISECONDS] [--htpasswd=PATH] [--cors] [--https=PATH] [--https-module=MODULE_NAME] [--proxy=PATH] [PATH]