gulp-connect浏览器自动刷新_gulp watch connet.reload 无效-程序员宅基地

技术标签: 前端开发  

LiveReload可以理解成即时刷新,在前端开发中,在编写或调试html/js/css代码后需要从编辑器切换到浏览器,再刷新浏览器才能看到页面变化,这种频繁的操作在一定程度上影响了工作效率,而LiveReload可以帮助我们解决了这个问题。

实现原理:通过在本地开启一个gulp服务,检测文件变化,当文件被修改后触发livereload任务,推送消息给浏览器刷新页面。

安装gulp-connect插件   //npm install gulp-connect

安装gulp-watch插件 //npm install gulp-watch

//实时刷新
var connect = require('gulp-connect'),
    watch = require('gulp-watch');

//定义livereload任务
gulp.task('connect',function(){
    connect.server({
        livereload:true
    })
})
//定义html任务
gulp.task('html',function(){
    gulp.src('.')
        .pipe(connect.reload());
})
//定义css任务
gulp.task('css',function(){
    gulp.src('css')
        .pipe(connect.reload());
})
//定义看守任务
gulp.task('watch',function(){
    gulp.watch('./index.html',['html']);
    gulp.watch('css/index.css',['css']);
})
//定义默认任务
gulp.task('default',['connect','watch']);

这个小demo只是简单的实验了一番,gulp启动任务后,可以看到终端显示在8080端口开启了一个http服务,然后当你在编辑器中保存完代码后就会触发浏览器自动刷新。

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_39722315/article/details/78417886

智能推荐

虾皮、lazada店铺运营攻略,如何搭建高效、稳定的自养号测评系统-程序员宅基地

文章浏览阅读913次,点赞16次,收藏10次。总之,要做好虾皮店铺,不仅需要明确的定位和优质的产品,还需要精心的运营和持续的改进。通过不断优化店铺形象、制定有效的营销策略、提供优质的客户服务以及加强供应链管理等手段,您将能够在激烈的竞争中脱颖而出,实现店铺的长足发展。1.稳定的网络环境是基石,它需要经过技术手段的洗礼,将电脑或手机的底层硬件参数伪装成国外数据,以躲避平台通过IP进行的深度检测。这种真实性高的评价能够帮助商家获得更多的信任和认可,从而提升产品的排名和流量的分配。您可以关注行业动态,学习先进的经营理念和技术,以提高店铺的运营水平。

统计检验问题:Friedman Test,Nemenyi test检验和Bonferroni-Dunn test检验_统计测试 cd diagrams-程序员宅基地

文章浏览阅读5k次,点赞11次,收藏43次。统计检验_统计测试 cd diagrams

三、购物车案例_17(笔记)_购物车案例请求数据地址-程序员宅基地

文章浏览阅读332次。购物车_购物车案例请求数据地址

在unity中DOTween 使用方法_tween number-程序员宅基地

文章浏览阅读603次。DOTween 使用方法_tween number

DSP之TMS320F28335学习总结与笔记(二)————ADC模块_dsp2833x_adc.c-程序员宅基地

文章浏览阅读1.2w次,点赞13次,收藏138次。F28335 ADC模块ADC转换模块A/D转换器(ADC)将模拟量转换为数字量通常要经过四个步骤:采样、保持、量化和编码。采样:将一个时间上连续变化的模拟量转化为时间上离散变化的模拟量。保持:将采样结果存储起来,直到下次采样,这个过程称作保持。一般,采样器和保持电路一起总称为采样保持电路。量化:将采样电平归化为与之接近的离散数字电平,这个过程称作量化。ADC关键指标分辨率:指数字量变化一个最小量时模拟信号的变化量,定义为满刻度与2^n的比值。分辨率又称为精度,通常以数字信号的位_dsp2833x_adc.c

V-rep学习笔记:机器人路径规划2-程序员宅基地

文章浏览阅读1.8k次。   路径规划问题是机器人学研究的一个重要领域,它是指给定操作环境以及起始和目标的位置姿态,要求选择一条从起始点到目标点的路径,使运动物体(移动机器人或机械臂)能安全、无碰撞地通过所有的障碍物而达到目标位置。路径规划从研究对象上可分为关节式机械臂和移动机器人。一般来讲前者具有更多的自由度,而后者的作业范围要更大一些,这两类对象具有不同的特点,因此在研究方法上略有不同。在V-rep学习笔记:机器人路..._collision pairs

随便推点

db2基本概念-程序员宅基地

文章浏览阅读368次。DB2支持以下两种类型的表空间: 1、 系统管理存储器表空间(SMS-SYSTEM MANAGED STORAGE) 2、 数据库管理存储器表空间(DMS-DATABASE MANAGED STORAGE) SMS、DMS用户表空间的特性对照 特性 ..._db2

模拟window桌面实现-程序员宅基地

文章浏览阅读84次。正在开发中的游戏有个全屏功能--可以在window桌面背景上运行,就像一些视频播放器在桌面背景上播放一样的,花了个上午整了个Demo放出来留个纪念。实现功能:显示图标,双击图标执行相应的程序,右击图标弹出该图标对应得菜单,点击非图标区则弹出桌面菜单。需要完整工程可以点此下载:DesktopWindow.rar。程序效果图如下:在这个程序里,定义了一个XShellItem..._模拟实现windows桌面效果

https://www.byhy.net/tut/webdev/django/01/-程序员宅基地

文章浏览阅读944次。https://www.byhy.net/tut/webdev/django/01/_byhy.net

vue玩转移动端H5微信支付和支付宝支付_移动端支付宝微信支付vue项目怎么写-程序员宅基地

文章浏览阅读5.8k次,点赞13次,收藏57次。业务场景介绍:H5移动端支持微信支付 [ 微信支付分为微信内支付(JSAPI支付官方API)和微信外支付(H5支付官方API)] && 支付宝支付 [手机网站支付转 APP 支付 官方API ]订单生成逻辑:前端请求后端提交订单,后端去和微信或者支付宝对接生成订单(后续支付都是这个逻辑进行的对接)一、移动端微信支付,vue中如何玩?在移动端微信支付分为微信内支付和微信外支付。1.在订单组件中选择支付方式之后在支付页面先去判断是否是在微信内://判断是否微信 is__移动端支付宝微信支付vue项目怎么写

深度学习AI编译器-TVM简介_tvm编译器-程序员宅基地

文章浏览阅读2k次,点赞5次,收藏9次。深度学习编译器主要为解决不同框架下训练的模型部署到指定的某些设备上时所遇到的一系列复杂的问题,即将各种深度学习训练框架的模型部署到各种硬件所面临的问题;_tvm编译器

如何检测新移动硬盘--HD Tune Pro硬盘工具_怎么检测移动硬盘是不是新的-程序员宅基地

文章浏览阅读2.8w次,点赞7次,收藏22次。要想检测移动硬盘的读写速度和是否有坏道,可使用HD Tune Pro硬盘工具软件。除了硬盘传输速率、健康状况、温度、随机存取、磁盘错误扫描、文件基准检测等常见功能外,该软件还能检测硬盘的固件版本、序列号、容量、缓存以及当前的Ultra DMA模式等。此外,目前市场上主流的2.5英寸320GB移动硬盘的数据读取速度大多在30MB/s左右;写入速度稍微慢一点,一般在25MB/s左右。..._怎么检测移动硬盘是不是新的

推荐文章

热门文章

相关标签