gulp-livereload的端口问题

在公司做项目时，有两个项目工程，都是通过gulp进行前端构建，使用gulp-livereload达到浏览器实时刷新的效果 。之前都是单独启用一个工程，所以并未出现什么问题，昨天我试着将两个工程同时启动。。问题来了！

端口冲突效果图.png

然后我就去gulp-livereload官网看了下，人家是这样说的

These options can either be set through livereload.listen(options) or livereload(options).

port                     Server port
host                     Server host
basePath                 Path to prepend all given paths
start                    Automatically start
quiet        false       Disable console logging
reloadPage   index.html  Path to the page the browsers on for a full page reload

意思是参数的设定可在livereload.listen()时或是livereload()。

于是，我照做了，调用时加了个参数对象
livereload.listen() -> livereload.listen({port:4443})
livereload() -> livereload({port:4443})
livereload -> livereload : {port:4443}

这里我做个说明，项目中用到了gulp-connect 故也将connect.server的参数livereload的true -> {port:4443}

运行。

改变livereload端口号运行结果.png

我们发现并没有报之前端口监听失败错误~

是不是觉得这样问题就解决啦~

然而并不是。。。

在你的浏览器中打开你的页面

浏览器中的源码.png

咦！！！！ 不对呀 我明明改了呀 而且运行也没报错。怎么这里插入的还是35729端口下的js

我的内心.png

接着我全局搜索了下35729 看到了gulp-livereload 。。后面还有connect-livereload 好奇之心驱使我看了下原来是gulp-connect引入了connect-livereload 。就是connect-livereload的作用将js文件插入html文件中。。所以我也明白了为何我在node工程并未引入gulp-livereload但还是有livereload。。

你也可以一郁闷全局替换35729为4443。这样问题也解决了~

为何端口还是35729的问题一直未解决，直到我回家后。。刷新页面。。阿勒！ 端口变了 实时刷新生效了。。

页面缓存问题。。换了个环境IP地址必须改变 这不 问题就解决了。

我的内心2.png

2017.6.4 星期天 晴