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 星期天 晴

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,860评论 18 139
  • 在现在的前端开发中,前后端分离、模块化开发、版本控制、文件合并与压缩、mock数据等等一些原本后端的思想开始...
    Charlot阅读 5,481评论 1 32
  • gulpjs是一个前端构建工具,与gruntjs相比,gulpjs无需写一大堆繁杂的配置参数,API也非常简单,学...
    依依玖玥阅读 3,181评论 7 55
  • 1、gulp的安装 首先确保你已经正确安装了nodejs环境。然后以全局方式安装gulp: npm install...
    F_imok阅读 2,398评论 1 11
  • 1.在系统安装:npm install gulp-cli -g 2.在文件中安装: npm init -y安装后出...
    醋宝宝阅读 390评论 0 0