gulp + browsersync实现页面自动刷新

写习惯了vue,特别喜欢vue的自动刷新功能,于是琢磨在node中如何自动刷新,使用过nodemon, 但是感觉效果差点,看到网上有gulp + livereload的方案和gulp +browsersync的方案,但都是褒贬不一,先简单记录如下:

第一、依赖安装

第二、根目录创建gulpfile.js,具体代码如下

var gulp = require('gulp');
var browserSync = require('browser-sync').create();
var reload = browserSync.reload;
var nodemon = require('gulp-nodemon');//这个可以让express启动
gulp.task("node", function() {nodemon({script: './bin/server',ignore : ["public/"],  env: {'NODE_ENV': 'development'}})
});gulp.task('server', ["node"], function() {//这的文件只需要监听前端的,一般后端开发不需要刷新页面var files = ['views/**/*.*'];//gulp.run(["node"]);browserSync.init({proxy: 'http://localhost:8001',browser: 'chrome',notify: false,port: 9999 //这个是browserSync对http://localhost:3000实现的代理端口});gulp.watch(files).on("change", reload);
});

参考链接:

https://www.jianshu.com/p/60afca6a00b3

https://www.jianshu.com/p/d31be76f8055

http://www.browsersync.cn/docs/gulp/

http://www.browsersync.cn/docs/api/#api-init

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/249299.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

[JZOJ5836] Sequence

Problem 题目链接 Solution 吼题啊吼题! 首先如何求本质不同的子序列个数就是 \(f[val[i]]1\sum\limits_{j1}^k f[j]\) 其中 \(f[i]\) 表示的是以 \(i\) 结尾的子序列个数 先把原数列的不同子序列个数求出来,然后观察一下这个转移,贪心的发现…

numpy和pandas的基础索引切片

Numpy的索引切片 索引 In [72]: arr np.array([[[1,1,1],[2,2,2]],[[3,3,3],[4,4,4]]]) In [73]: arr Out[73]: array([[[1, 1, 1],[2, 2, 2]],[[3, 3, 3],[4, 4, 4]]])In [74]: arr.nd…

mybatis的Example[Criteria]的使用

https://blog.csdn.net/u014756578/article/details/86490052

Thunar 右键菜单等自定义

Thunar 右键菜单等自定义 可以使用图形界面或者直接编辑配置文件,二者是等价的。 图形界面: 以给“zip,rar,7z”等文件添加“在此位置使用unar解压缩”的右键菜单为例:(unar可以很好地处理编码问题&#xf…

JavaScript设计模式(二)之单例模式

一、单例模式的定义 单例就是保证一个类只有一个实例,实现的方法一般是先判断实例存在与否,如果存在直接返回,如果不存在就创建后再返回,这就确保了一个类只有一个实例对象。在JavaScript里,单例作为一个命名空间的提…

python全栈开发_day10_函数的实参和形参

一:函数的实参和形参 实参是在调用函数时()出现的外界的实际的值 形参不能再函数外部直接使用 1)实参的两种形式 实参是调用函数时()中传入的参数 1.位置实参 def a(a):print(a)a(1)#得到返回值:1 2.关键字实参 def a(a,b):print(a,b)a(b3,a5)#得到返回值…

JAVA的(PO,VO,TO,BO,DAO,POJO)解释

JAVA的(PO,VO,TO,BO,DAO,POJO)解释 O/R Mapping 是 Object Relational Mapping(对象关系映射)的缩写。通俗点讲,就是将对象与关系数据库绑定,用对象来表示关系数据。在O/R Mapping的世界里,有两个基本的也是重要的东东…

使用wsimport命令生成webService客户端代码实例

https://blog.csdn.net/qq_39459412/article/details/79079865

学习网站大汇集

一.综合类学习网站(中文) 1.网易公开课:https://open.163.com/。上面有TED、可汗学院、国内外高校公开课的免费资源。站内内容完全免费,良心推荐。 2.网易云课堂:http://study.163.com/。网易旗下付费学习平台&#…

ios怎样在一个UIImageButton的里面加一些自己定义的箭头

能够採用例如以下方法,写一个函数: -(UIImage*) getOneImageButtonWithArrow{//tmpView做附控件UIView *tmpView [[UIView alloc] initWithFrame:CGRectMake(0.0f, 0.0f, 38.0f, 32.0f)];tmpView.backgroundColor [UIColor clearColor];//bgImg作为背景…

vue从入门到精通之基础篇(一)语法概要

(1).vue起步 1:引包2:启动 new Vue({el:目的地,template:模板内容});options 目的地 el内容 template数据 data 保存数据属性 数据驱动视图 (2).插值表达式 {{ 表达式 }} 对象 (不要连续3个{{ {name:‘jack’} }})字符串 {{ ‘xxx’ }}判断后的布尔值 {{ true }}三元表达式…

dede 文章列表页如何倒序排列

{dede:arclist row6 typeid18 orderwayasc} <li>;<a href"[field:arcurl/]">[field:title/]</a></li> {/dede:arclist} 正常排列&#xff1a;orderwayasc倒序排列&#xff1a;orderwaydesc转载于:https://www.cnblogs.com/php-qiuwei/p/1062…

Chapter 5 Blood Type——24

"Shes just a little faint," he reassured the startled nurse. "Theyre blood typing in Biology." "她只是有点头晕&#xff0c;" 他让护士放心的说道。“他们再生物课上测血型。” The nurse nodded sagely. "Theres always one."…

vue从入门到精通之基础篇(二)组件

(1).局部组件的使用 ​ 渲染组件-父使用子组件 1: 创建子组件(对象) var Header { template:模板 , data是一个函数,methods:功能,components:子组件们 } 2: 在父组件中声明,根属性components:{ 组件名:组件对象 }3: 在父组件要用的地方使用 <组件名></组件名> …

@Scheduled

Scheduled注解的使用这里不详细说明&#xff0c;直接对8个参数进行讲解。 参数详解 cron 该参数接收一个cron表达式&#xff0c;cron表达式是一个字符串&#xff0c;字符串以5或6个空格隔开&#xff0c;分开共6或7个域&#xff0c;每一个域代表一个含义。 cron表达式语法 […

eclipse2019-03设置代码编辑区背景为图片

一、我的主题设置如下所示 二、找到如下所示或类似的文件夹 三、在该文件夹里的images文件夹里添加图片 四、在CSS目录下的e4-dark_win.css文件中添加如下代码   .MPart StyledText {     background-image: url(./bg.jpg);     background-repeat: no-repeat;  …

idea集成gitlab使用ssh免密登录

网上有很多介绍ssh免密登录的文章&#xff0c;具体步骤如下&#xff1a; 1. 生成SSH Key ssh-keygen -t rsa -C "your_emailexample.com" 默认会在相应路径下&#xff08;/your_home_path&#xff09;生成id_rsa和id_rsa.pub两个文件&#xff0c;此时终端会显示&…

vue从入门到精通之基础篇(三)生命周期

生命周期 定义&#xff1a; 每个 Vue 实例在被创建时都要经过从创建倒挂载再到更新、卸载的一系列过程&#xff0c;同时在这个过程中也会运行一些叫做生命周期钩子的函数&#xff0c;可以让我们用自己注册的js方法控制整个大局&#xff0c;在这些事件响应方法中的this直接指向…

libcurl库进行http通讯网络编程

https://www.cnblogs.com/lifan3a/articles/7479256.html

Java 开始

&#xff08;事先声明&#xff1a;该文章并非完全是我自己的产出&#xff0c;更多的是我个人在看到资料后通过理解并记录下来&#xff0c;作为自己阅读后的一个笔记&#xff1b;我现在试图对自己多年工作中的知识点做一个回顾&#xff0c;希望能融会贯通&#xff09; &#xff…