livereload工具实现前端可视化开发【推荐】


Posted in Javascript onDecember 23, 2016

在前端开发中,我们会频繁的修改html、css、js,然后刷新页面,开效果,再调整,再刷新,不知不觉会浪费掉我们很多时间。有没有什么方法,我在编辑器里面改了代码以后,只要保存,浏览器就能实时刷新。经过不懈的努力,发现了这么一个工具--livereload。这是一款能根据你本地文件(html、css、js)的变化,自动跟踪刷新浏览器的实时刷新工具,有了这个工具,会大大减轻你刷新页面的工作量。

安装chrome插件

这个就不做详细解释了,去chrome商店,下载安装livereload这么一个插件,安装完成后,浏览器上会出现这么一个小图标livereload工具实现前端可视化开发【推荐】,就表示插件安装成功了。

livereload基本使用

首先使用npm安装livereload模块

npm install -g livereload

在网站的当前目录运行命令行,输入livereload命令,会出现如下

livereload工具实现前端可视化开发【推荐】

这就证明livereload已经运行成功,我们还可以看到chrome上的小图标会变成实心状态livereload工具实现前端可视化开发【推荐】,代表连接成功。

然后我们在网站编辑器中改变响应文字,保存,浏览器就可以自动刷新了。是不是很方便?

编写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任务,更改编辑器文本,同样能实现实时刷新效果。

livereload工具实现前端可视化开发【推荐】

好了,这款工具就介绍到这里了,希望各位喜欢。

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
jQuery如何实现点击页面获得当前点击元素的id或其他信息
Jan 09 Javascript
javascript与Python快速排序实例对比
Aug 10 Javascript
JavaScript setTimeout使用闭包功能实现定时打印数值
Dec 18 Javascript
基于JQuery实现图片上传预览与删除操作
May 24 Javascript
深入理解JavaScript单体内置对象
Jun 06 Javascript
js获取元素的外链样式的简单实现方法
Jun 06 Javascript
js实现类bootstrap模态框动画
Feb 07 Javascript
浅谈JS函数节流防抖
Oct 18 Javascript
基于Axios 常用的请求方法别名(详解)
Mar 13 Javascript
vue 标签属性数据绑定和拼接的实现方法
May 17 Javascript
ng-zorro-antd 入门初体验
Dec 03 Javascript
解决antd 下拉框 input [defaultValue] 的值的问题
Oct 31 Javascript
浅谈jQuery操作类数组的工具方法
Dec 23 #Javascript
jquery pagination插件动态分页实例(Bootstrap分页)
Dec 23 #Javascript
详解jQuery中的DOM操作
Dec 23 #Javascript
Bootstrap table两种分页示例
Dec 23 #Javascript
理解AngularJs篇:30分钟快速掌握AngularJs
Dec 23 #Javascript
Bootstrap和Java分页实例第二篇
Dec 23 #Javascript
js实现键盘自动打字效果
Dec 23 #Javascript
You might like
PHP的FTP学习(一)[转自奥索]
2006/10/09 PHP
在PHP中使用反射技术的架构插件使用说明
2010/05/18 PHP
php实现的简易扫雷游戏实例
2015/07/09 PHP
php使用goto实现自动重启swoole、reactphp、workerman服务的代码
2020/04/13 PHP
javascript实现上传图片前的预览(TX的面试题)
2007/08/20 Javascript
js网页版计算器的简单实现
2013/07/02 Javascript
使用JavaScript链式编程实现模拟Jquery函数
2014/12/21 Javascript
JavaScript将数字转换成大写中文的方法
2015/03/23 Javascript
javascript实现校验文件上传控件实例
2015/04/20 Javascript
JavaScript 模块的循环加载实现方法
2015/12/13 Javascript
用file标签实现多图文件上传预览
2017/02/14 Javascript
(模仿京东用户注册)用JQuery实现简单表单验证,初学者必看
2018/01/08 jQuery
JS简单实现动态添加HTML标记的方法示例
2018/04/08 Javascript
JS实现的3des+base64加密解密算法完整示例
2018/05/18 Javascript
原生js实现淘宝放大镜效果
2020/10/28 Javascript
详解如何用webpack4从零开始构建react开发环境
2019/01/27 Javascript
vue使用混入定义全局变量、函数、筛选器的实例代码
2019/07/29 Javascript
五分钟搞懂Vuex实用知识(小结)
2019/08/12 Javascript
js实现飞机大战游戏
2020/08/26 Javascript
[01:04:14]OG vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
Python返回真假值(True or False)小技巧
2015/04/10 Python
详解Python中列表和元祖的使用方法
2015/04/25 Python
利用Python如何生成hash值示例详解
2017/12/20 Python
Django数据库表反向生成实例解析
2018/02/06 Python
使用Python和Scribus创建一个RGB立方体的方法
2019/07/17 Python
python 实现读取csv数据,分类求和 再写进 csv
2020/05/18 Python
完美解决ARIMA模型中plot_acf画不出图的问题
2020/06/04 Python
python如何导出微信公众号文章方法详解
2020/08/31 Python
针对HTML5的Web Worker使用攻略
2015/07/12 HTML / CSS
音乐专业应届生教师求职信
2013/11/04 职场文书
大学生优秀自荐信范文
2014/02/25 职场文书
建筑工程专业大学生求职信
2014/04/23 职场文书
2014年度思想工作总结
2014/11/27 职场文书
2014年出纳工作总结与计划
2014/12/09 职场文书
初中教师德育工作总结2015
2015/05/12 职场文书
唐山大地震的观后感
2015/06/05 职场文书