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 相关文章推荐
document.getElementById为空或不是对象的解决方法
Jan 24 Javascript
jQuery contains过滤器实现精确匹配使用方法
Apr 12 Javascript
浅析Cookie中的Path与domain
Dec 18 Javascript
Javascript核心读书有感之词法结构
Feb 01 Javascript
JavaScript实现基于Cookie的存储类实例
Apr 10 Javascript
简单分析javascript面向对象与原型
May 21 Javascript
详解JavaScript中setSeconds()方法的使用
Jun 11 Javascript
jquery tmpl模板(实例讲解)
Sep 02 jQuery
详解基于vue-router的动态权限控制实现方案
Sep 28 Javascript
javascript移动端 电子书 翻页效果实现代码
Sep 07 Javascript
Vue v-for循环之@click点击事件获取元素示例
Nov 09 Javascript
node后端服务保活的实现
Nov 10 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单态模式简单用法示例
2016/11/16 PHP
js身份证验证超强脚本
2008/10/26 Javascript
Javascript 面向对象 对象(Object)
2010/05/13 Javascript
js 控制下拉菜单刷新的方法
2013/03/03 Javascript
点击页面其它地方隐藏该div的两种思路
2013/11/18 Javascript
深入探秘jquery瀑布流的实现
2016/01/30 Javascript
使用Sticky组件实现带sticky效果的tab导航和滚动导航的方法
2016/03/22 Javascript
jQuery设置Cookie及删除Cookie实例分析
2016/04/15 Javascript
BootStrap智能表单demo示例详解
2016/06/13 Javascript
基于jQuery和hwSlider实现内容左右滑动切换效果附源码下载(一)
2016/06/22 Javascript
使vue实现jQuery调用的两种方法
2019/05/12 jQuery
vue路由传参三种基本方式详解
2019/12/09 Javascript
Js参数RSA加密传输之jsencrypt.js的使用
2020/02/07 Javascript
基于JS实现计算24点算法代码实例解析
2020/07/23 Javascript
Python函数可变参数定义及其参数传递方式实例详解
2015/05/25 Python
Python多线程经典问题之乘客做公交车算法实例
2017/03/22 Python
Python实现基本数据结构中队列的操作方法示例
2017/12/04 Python
python中in在list和dict中查找效率的对比分析
2018/05/04 Python
Python中关键字global和nonlocal的区别详解
2018/09/03 Python
对pandas数据判断是否为NaN值的方法详解
2018/11/06 Python
Python删除n行后的其他行方法
2019/01/28 Python
python机器学习库xgboost的使用
2020/01/20 Python
Python如何把Spark数据写入ElasticSearch
2020/04/18 Python
世界上最好的威士忌和烈性酒购买网站:The Whisky Exchange
2016/11/20 全球购物
澳大利亚时尚前卫设计师珠宝在线:Amber Sceats
2017/10/04 全球购物
吉列剃须刀美国官网:Gillette美国
2018/07/13 全球购物
英国国家美术馆商店:National Gallery
2019/05/01 全球购物
Ruby如何定义一个类
2012/10/08 面试题
初中生学习生活的自我评价
2013/11/20 职场文书
优秀应届毕业生推荐信
2014/02/18 职场文书
公司寄语大全
2014/04/10 职场文书
公司委托书范本5篇
2014/09/20 职场文书
2014年移动公司工作总结
2014/12/08 职场文书
奖励通知
2015/04/22 职场文书
财务管理制度范本
2015/08/04 职场文书
python 定义函数 返回值只取其中一个的实现
2021/05/21 Python