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

智能推荐

【2024-01-14】各种安卓模拟器安装magisk(magisk-delta) 雷电、蓝叠、MuMu、逍遥、夜神_magisk terminal emulator-程序员宅基地

文章浏览阅读6.9k次,点赞36次,收藏44次。使用Magisk Delta在各种模拟器安装Magisk到System分区的过程_magisk terminal emulator

大数据之Hive:Hive中日期时间函数_hive date format函数-程序员宅基地

文章浏览阅读1.7k次,点赞2次,收藏5次。目录1.date_format函数(根据格式整理日期)2.date_add函数(加减日期),date_sub,date_diff3.next_day函数4.last_day函数(求当月最后一天日期)1.date_format函数(根据格式整理日期)hive (gmall)> select date_format('2021-03-20','yyyy-MM');2020-03备注:与mysql中date_format函数的不同之处是:在hive中,可以指定为"yyyy-MM",在mysql中必_hive date format函数

转贴 解决sd卡的读写问题_hc32f460 sd 卡 micro sd卡-程序员宅基地

文章浏览阅读1.6k次。最近sd卡读写出了问题,参考一篇网志解决。http://sns.linuxpk.com/space-1717-do-blog-id-15748.html 在embedded linux下插上一个U盘,在/dev/scsi/ 目录下,出现了4个part 。把该U盘插在pc机,在windows下_hc32f460 sd 卡 micro sd卡

qsort函数(c语言库函数)_qsqrt位于什么库中-程序员宅基地

文章浏览阅读643次,点赞19次,收藏9次。qsort函数的基本概念及代码示例_qsqrt位于什么库中

flink 1.13.1配置报错的解决过程_main error could not create plugin of type class o-程序员宅基地

文章浏览阅读4.3k次。部署flink提交客户端的时间报错如下:提示/tmp下无权限flink@dbos-bigdata-flink004 ~]$ flink run -m yarn-cluster -yjm 1024 -ytm 4096 /opt/flink/examples/batch/WordCount.jarSLF4J: Class path contains multiple SLF4J bindings.SLF4J: Found binding in [jar:file:/opt/flink-1.13.1/l._main error could not create plugin of type class org.apache.logging.log4j.co

大数据概况及Hadoop生态系统_hadoop系统固有功能分析-程序员宅基地

文章浏览阅读308次。一、初识大数据了解大数据是什么。了解大数据的特性。了解大数据带给企业哪些方面的挑战。1.大数据的基本概念大数据(big data),指无法在一定时间范围内用常规软件工具进行捕捉、管理和处理的数据集合,是需要新处理模式才能具有更强的决策力、洞察发现力和流程优化能力的海量、高增长率和多样化的信息资产。2.大数据的特性(1)4V特征:a. Volume(大数据量):90% 的数据是过去两年产生b.Velocity(速度快):数据增长速度快,时效性高c.Variety(多样化):数据种类和来源多_hadoop系统固有功能分析

随便推点

html页面播放rtsp流媒体_html播放rtsp流-程序员宅基地

文章浏览阅读2.7k次。采取的方案node.js + Ffmpeg + jsmpeg工具node.js 下载路径https://pan.baidu.com/s/1DYnPW28hZz-I56jOopwxGQFfmpeg下载路径:https://pan.baidu.com/s/1KEGIYrRVLnLyDx1hwx4yBAjsmpeg下载路径:https://pan.baidu.com/s/1p5SnShAlTB..._html播放rtsp流

黑马程序员--Objective-C——面向对象-程序员宅基地

文章浏览阅读319次。------Java培训、Android培训、iOS培训、.Net培训、期待与您交流! -------一、面向对象的理解 面向对象 Object Oriented,简称OO,面向对象的思想,即“万物皆对象”。解决问题思考的是需要用的对象,用这些对象的属性功能去解决问题,而不是去思考解决问题的步骤。把具有相似功能和属性的对象抽象为类,即一个类可以有很多对象,而一个对

由繁化简 Q-Automation助力自动化测试管理-程序员宅基地

文章浏览阅读383次,点赞8次,收藏7次。Q-Automation是基于ATX的自动化测试管理软件,用于测试电子控制单元(ECU)。该软件支持诊断协议层测试和诊断功能测试,且只需填写Excel表格,即可实现半自动化测试需求,从而缩短用户的测试周期。此外,使用ODX/OTX标准化工具,可在支持多种测试硬件的同时,减少测试软件的兼容性问题,还便于与其它工具共享数据。

【试水CAS-4.0.3】第04节_CAS服务端通过数据库认证用户_cas如何数据库管理 serviceid-程序员宅基地

文章浏览阅读5.5k次。完整版见https://jadyer.github.io/2015/07/18/sso-cas-login-db/_cas如何数据库管理 serviceid

C# 调用RESTFul接口_c#调用restful接口-程序员宅基地

文章浏览阅读3.2k次。c# Restful_c#调用restful接口

HOG特征——行人识别_hog特征识别行人 peopledetector=vision.peopledetector; i=-程序员宅基地

文章浏览阅读1.8k次,点赞4次,收藏24次。HOG特征简介HOG 全称为 Histogram of Oriented Gradients ,即方向梯度的直方图。HOG 是由 Navneet Dalal & Bill Triggs 在 CVPR 2005发表的论文中提出来的,目的是为了更好的解决行人检测的问题。先来把这几个字拆开介绍,首先,梯度的概念和计算梯度的方法已经在前一篇文章中介绍了,方向梯度就是说梯度的方向我们也要利用上,..._hog特征识别行人 peopledetector=vision.peopledetector; i=imread(

推荐文章

热门文章

相关标签