gulp-connect浏览器自动刷新

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服务，然后当你在编辑器中保存完代码后就会触发浏览器自动刷新。

gulp-connect浏览器自动刷新相关推荐

gulp4.0浏览器自动刷新
环境版本: node版本:v12.2.0 npm版本:6.9.0 gulp版本: 4.0.2(node的12.0以上版本需要gulp4.0以上版本,不然会有许多不兼容问题) gulp-cli : 2. ...
Webpack 2 视频教程 007 - 配置 WDS 进行浏览器自动刷新
原文发表于我的技术博客这是我免费发布的高质量超清「Webpack 2 视频教程」. Webpack 作为目前前端开发必备的框架,Webpack 发布了 2.0 版本,此视频就是基于 2.0 的版本讲 ...
webpack配置---设置快捷打包和浏览器自动刷新
1.设置快捷打包找到package.json中scripts 之后再输入命令npm run build 2.设置浏览器自动刷新要先安装html-webpack-plugin这个插件再配置 3.将c ...
HTML运行到浏览器自动刷新,web前端开发之热加载—liveReload（浏览器自动刷新）...
今天主要写一下,如何配置,保存前端代码后,浏览器自动刷新的功能,双屏操作,真的会方便很多,对于前端开发来说,一边写样式,一边看效果,爽翻~ 图片发自简书App 一.开发环境 1.电脑系统:mac 2. ...
修改文件后浏览器自动刷新解决方案
为什么要找这样的一个方法? 工作场景中发现的需求,都要找办法去解决. 我们在双屏开发的时候,经常是在Mac屏幕上写代码,然后在扩展屏幕上放着浏览器. 一般写几行代码,就会去刷新一下浏览器,看看代码运行 ...
Safari浏览器自动刷新页面插件Auto Refresh
Safari浏览器自动刷新页面插件Auto Refresh https://extensions.apple.com/details/?id=com.agriffindesign.autorefre ...
十行代码实现浏览器自动刷新
需求:实现一个程序,让浏览器每秒钟自动刷新一次,并显示当前的时间戳核心思路: 通过HTTP响应报头中的Refresh字段,可以控制浏览器自动刷新的时机通过 Date类的getTime方法可以获取到 ...
360浏览器自动刷新选项设置方法
360浏览器自动刷新选项设置方法 360浏览器不安装插件自动刷新怎么设置?我们使用浏览器在游览器贴吧的时候,经常会不同的按"Ctrl+R"或者是"F5"来刷新页 ...
vscode保存代码，浏览器自动刷新页面
一.Live Server 之前挺好用的,但是今天发现Live Server可以运行到浏览器,但是保存代码之后不能自动刷新浏览器了.经过查资料,试了以下方法: 前提:在文件夹中运行 1.将vscode ...

gulp-connect浏览器自动刷新

gulp-connect浏览器自动刷新相关推荐

最新文章

热门文章