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 相关文章推荐
IE Firefox 使用自定义标签的区别
Oct 15 Javascript
jquery中使用ajax获取远程页面信息
Nov 13 Javascript
基于MVC3方式实现下拉列表联动(JQuery)
Sep 02 Javascript
Javascript中的回调函数和匿名函数的回调示例介绍
May 12 Javascript
jQuery中removeClass()方法用法实例
Jan 05 Javascript
JS实现统计复选框选中个数并提示确定与取消的方法
Jul 01 Javascript
js跨域资源共享 基础篇
Jul 02 Javascript
深入理解jQuery3.0的domManip函数
Sep 01 Javascript
详解node服务器中打开html文件的两种方法
Sep 18 Javascript
浅谈Angular 的变化检测的方法
Mar 01 Javascript
纯JS开发baguetteBox.js响应式画廊插件
Jun 28 Javascript
Element Dropdown下拉菜单的使用方法
Jul 26 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循环语句 for()与foreach()用法区别介绍
2012/09/05 PHP
linux下安装php的memcached客户端
2014/08/03 PHP
php绘制一个矩形的方法
2015/01/24 PHP
php使用Jpgraph绘制简单X-Y坐标图的方法
2015/06/10 PHP
PHP加密解密函数详解
2015/10/28 PHP
初识ThinkPHP控制器
2016/04/07 PHP
Yii2框架中使用PHPExcel导出Excel文件的示例
2017/08/09 PHP
百度留言本js 大家可以参考下
2009/10/13 Javascript
js中arguments,caller,callee,apply的用法小结
2014/01/28 Javascript
javascript中数组的定义及使用实例
2015/01/21 Javascript
jQuery插件slicebox实现3D动画图片轮播切换特效
2015/04/12 Javascript
详解JavaScript中的forEach()方法的使用
2015/06/08 Javascript
JavaScript判断IE版本型号
2015/07/27 Javascript
JavaScript初学者必看“new”
2017/06/12 Javascript
AngularJS解决ng-if中的ng-model值无效的问题
2017/06/21 Javascript
详解React-Native解决键盘遮挡问题(Keyboard遮挡问题)
2017/07/13 Javascript
基于vue v-for 多层循环嵌套获取行数的方法
2018/09/26 Javascript
解决Vue router-link绑定事件不生效的问题
2020/07/22 Javascript
js实现贪吃蛇小游戏(加墙)
2020/07/31 Javascript
Python实现购物程序思路及代码
2017/07/24 Python
Python set常用操作函数集锦
2017/11/15 Python
Python实现两款计算器功能示例
2017/12/19 Python
浅谈Python中的zip()与*zip()函数详解
2018/02/24 Python
Python实现的端口扫描功能示例
2018/04/08 Python
python3获取当前文件的上一级目录实例
2018/04/26 Python
判断python对象是否可调用的三种方式及其区别详解
2019/01/31 Python
Python OpenCV之图片缩放的实现(cv2.resize)
2019/06/28 Python
python 动态绘制爱心的示例
2020/09/27 Python
CSS伪类与CSS伪元素的区别及由来具体说明
2012/12/07 HTML / CSS
本科生自荐信
2014/06/18 职场文书
煤矿安全协议书
2014/08/20 职场文书
社区领导班子四风问题原因分析及整改措施
2014/09/28 职场文书
2014年审计工作总结
2014/11/17 职场文书
烟台的海导游词
2015/02/02 职场文书
商务考察邀请函模板
2015/02/02 职场文书
小学生安全教育主题班会
2015/08/12 职场文书