live-server vs browser-sync（入门级介绍）-CSDN博客

结论

live-server使用简单，实现原理也不复杂，单独使用的话适用于代码不需要做任何预处理就能够运行的项目。
browser-sync使用起来也比较简单，实现原理相对复杂，支持静态服务器和代理，功能相对较多，结合gulp使用的话可很大程度上提高开发效率。

声明

为方便举例本文使用以下目录结构作为说明，app目录下包含所有项目开发代码；

简介

live-server是什么鬼？

live-server是一个简单地web服务器
live-server支持html、js改变自动reload浏览器页面，css改变重新请求css文件（不reload整个页面）

browser-sync是什么鬼？

browser-sync也自带web服务器功能
live-server支持手动调用reload方法将资源文件reload到浏览器

入门级使用

live-server

npm install -D live-server
在package.json的"scripts"下添加 "live-server":"live-server ./app"
npm run live-server

启动了之后可以编辑下index.html，js文件夹下的js文件，css文件夹中的css文件，然后按下ctrl+s,切换到浏览器查看效果。

browser-sync

browsersync官方推荐将browser-sync结合gulp使用，以下例子来源于browser-sync

在gulpfile.js中加入以下代码（见下面的“gulpfile.js简易栗子”）
在package.json的scripts中添加 "gulp": "gulp",
npm run gulp

启动项目后可编辑html、css、js文件并切换到浏览器查看效果（browser-sync功能不止于此，其他功能比如说结合gulp监听scss文件修改，然后通过task将scss处理成css文件后使用browserSync.reload({stream:true})同步到浏览器，还有代理功能可通过以下网址自行参考browser-sync）

// gulpfile.js简易栗子
var gulp = require('gulp');
var browserSync = require('browser-sync').create();

// 静态服务器
gulp.task('default', function () {
  browserSync.init({
    server: {
      baseDir: "./app"
    }
  });

  // 监听文件改变手动reload资源到浏览器
  gulp.watch("./app/*.html").on("change", browserSync.reload);
  gulp.watch("./app/css/*.css").on("change", browserSync.reload);
  gulp.watch("./app/js/*.js").on("change", browserSync.reload);
});
复制代码

实现原理简介

live-server

live-server在启动之后会在页面的body中通过script加入以下代码，以下代码的主要功能就是通过websocket实现浏览器和本地web服务器的双工通信。当我们在vscode（其他编辑器也可以）中按下ctrl+s组合键时live-server会检测当前文件类型，如果是html或js文件，则通过websocket发"reload"给浏览器，然后浏览器直接通过window.location.reload();重新加载整个页面，如果是css文件则发送"refreshcss"给浏览器，然后通过将页面上所有的link标签都删除然后重新添加的方式请求新的css文件（不需要重新加载整个页面）

<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>
复制代码

browser-sync

通过入门级使用中介绍的的gulpfile.js启动项目之后，browser-sync会在页面上加个script标签（代码如下）去请求一个js文件（browser-sync-client.js），我看了下“browser-sync-client.js”文件，里面也是通过websocket来实现浏览器和browser-sync服务器的双工通信的（具体咋实现加载的没看，代码是压缩过的，而且有点多……，后面有时间的话再看下）

<script id="__bs_script__">
//<![CDATA[
    document.write("<script async src='/browser-sync/browser-sync-client.js?v=2.24.5'><\/script>".replace("HOST", location.hostname));
//]]>
</script>
复制代码

题外话

感觉开发这些工具的开发者真是厉害呀，原始开发体验不好有啥关系，自己写个工具提高开发体验就阔以了呀，开发好了再分享出来让社区受益，可以说是很厉害了。想想自己好像很缺这种意识，总是把所有东西都当成理想当然，学习个新技术也是浅尝辄止，可以跑起来就行了，不大可能会去深入了解下背后的技术原理，优化也就无从谈起，至于写个工具改善开发体验的事情更是从来都没做过，这是病，要改，要改，要改，重要的话说三遍！（ps：希望大家阔以一起监督一起进步呀n(≧▽≦)n）