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

使用 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 输出的页面底部自动增加了

<!-- Code injected by live-server -->
<script type="text/javascript">
    // <![CDATA[  <-- For SVG support
    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.');
        })();
    }
    // ]]>
</script>

通过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]