前端可视化开发--liveload
2024-08-25 03:43:07
在前端开发中,我们会频繁的修改html、css、js,然后刷新页面,开效果,再调整,再刷新,不知不觉会浪费掉我们很多时间。有没有什么方法,我在编辑器里面改了代码以后,只要保存,浏览器就能实时刷新。经过不懈的努力,发现了这么一个工具--livereload。这是一款能根据你本地文件(html、css、js)的变化,自动跟踪刷新浏览器的实时刷新工具,有了这个工具,会大大减轻你刷新页面的工作量。
安装chrome插件
这个就不做详细解释了,去chrome商店,下载安装livereload这么一个插件,安装完成后,浏览器上会出现这么一个小图标 就表示插件安装成功了。
livereload基本使用
首先使用npm安装livereload模块
npm install -g livereload
在网站的当前目录运行命令行,输入livereload
命令,会出现如下
这就证明livereload已经运行成功,我们还可以看到chrome上的小图标会变成实心状态
这个就代表连接成功。
然后我们在网站编辑器中改变响应文字,保存,浏览器就可以自动刷新了。是不是很方便?
编写livereload脚本
上面只是实现了livereload
的基本功能。实际上,livereload也可以编写脚本运行。
首先,利用npm安装gulp、gulp-livereload模块
npm init
npm install --save-dev gulp
npm install --save-dev gulp-livereload
安装完成后,在你网站的根目录新建gulpfile.js
文件,然后编写脚本
var gulp = require("gulp");
var liveReload = require("gulp-livereload");
gulp.task("watch", function (file) {
/**
* 监听livereload
*/
liveReload.listen();
/**
* 监听文件变化,将文件流传入liveReload模块进行浏览器刷新
*/
gulp.watch("./*.html", function (file) {
console.log(file);
gulp.src("./*.html").pipe(liveReload());
});
});
在命令窗口中运行watch
任务,更改编辑器文本,同样能实现实时刷新效果。
好了,这款工具就介绍到这里了,希望各位喜欢。
最新文章
- react+redux官方实例TODO从最简单的入门(2)-- 增
- ■SQL注入自学[第三学:注入点的读写、out_file]
- Selenium2学习-000-Selenium2初识
- [iOS]C语言技术视频-02-程序分支结构(if...else)
- [转] spring事务管理几种方式
- 从零开始搭建Vue组件库——VV-UI
- c# 动态实例化一个泛型类
- PullToRefreshScrollView 嵌套RecyclerView实现特卖列表倒计时抢购
- VB中获取网页数据
- windows+mysql集群搭建-三分钟搞定集群
- Android编码学习之Fragment
- 垃圾收集器(GC)
- [转]linux下编译boost.python
- php中正则表达式详解
- iOS 结构化数据访问
- SRM482
- Android 用java语言执行Shell命令
- PKU2418_树种统计(map应用||Trie树)
- 精伦盒子H1,插上USB,找不到对应的文件路径
- Confluence 6 的 Crowd 设置
热门文章
- Arcgis基于高程(DEM)计算地形湿度指数(TWI),以及坡度(Slope)度单位转换为弧度
- 04_ Broadcast Receiver
- 20190713_windows 2008 R2在启动网站时报错_另一个程序正在使用此文件,进程无法访问
- String、StringBUffer和StringBuilder的区别与使用
- 第三十一章、containers容器类部件QDockWidget停靠窗功能介绍
- 第9.5节 Python的readlines读取文件内容及其参数hint使用分析
- PyQt(Python+Qt)学习随笔:QTableView的cornerButtonEnabled属性
- Docker部署CTF综合性靶场,定时刷新环境
- jQuery笔记(三)
- Python 学习笔记 之 01 - 基础总结