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 相关文章推荐
使用javascript访问XML数据的实例
Dec 27 Javascript
JScript中的"this"关键字使用方式补充材料
Mar 08 Javascript
Javascript 中介者模式实例
Dec 16 Javascript
查询json的数据结构的8种方式简介
Mar 10 Javascript
JavaScript将Web页面内容导出到Word及Excel的方法
Feb 13 Javascript
基于JS实现EOS隐藏错误提示层代码
Apr 25 Javascript
使用伪命名空间封装保护独自创建的对象方法
Aug 04 Javascript
Bootstrap 模态框自定义点击和关闭事件详解
Aug 10 Javascript
Vue-CLI 3.X 部署项目至生产服务器的方法
Mar 22 Javascript
React传值 组件传值 之间的关系详解
Aug 26 Javascript
在微信小程序中使用mqtt服务的方法
Dec 13 Javascript
Vue.extend 登录注册模态框的实现
Dec 29 Vue.js
浅谈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
浅析iis7.5安装配置php环境
2015/05/10 PHP
php验证码实现代码(3种)
2015/09/07 PHP
thinkPHP线上自动加载异常与修复方法实例分析
2016/12/01 PHP
DOM下的节点属性和操作小结
2009/05/14 Javascript
JavaScript 判断判断某个对象是Object还是一个Array
2010/01/28 Javascript
通过onmouseover选项卡实现img图片的变化
2014/02/12 Javascript
jQuery中:disabled选择器用法实例
2015/01/04 Javascript
JavaScript控制网页平滑滚动到指定元素位置的方法
2015/04/17 Javascript
avalonjs制作响应式瀑布流特效
2015/05/06 Javascript
js实现文本框选中的方法
2015/05/26 Javascript
javascript图片切换综合实例(循环切换、顺序切换)
2016/01/13 Javascript
JS动态计算移动端rem的解决方案
2016/10/14 Javascript
js学习笔记之事件处理模型
2016/10/31 Javascript
使用BootStrap建立响应式网页——通栏轮播图(carousel)
2016/12/21 Javascript
jQuery简单判断值是否存在于数组中的方法示例
2018/04/17 jQuery
Phaser.js实现简单的跑酷游戏附源码下载
2018/10/26 Javascript
node+express框架中连接使用mysql(经验总结)
2018/11/10 Javascript
vue移动端城市三级联动组件使用详解
2019/07/26 Javascript
微信小程序实现滑动翻页效果(完整代码)
2019/12/06 Javascript
vue项目实现多语言切换的思路
2020/09/17 Javascript
vue3.0封装轮播图组件的步骤
2021/03/04 Vue.js
Python学习之asyncore模块用法实例教程
2014/09/29 Python
python面向对象法实现图书管理系统
2019/04/19 Python
Selenium webdriver添加cookie实现过程详解
2020/08/12 Python
Python jieba结巴分词原理及用法解析
2020/11/05 Python
纯CSS3实现表单验证效果(非常不错)
2017/01/18 HTML / CSS
HTML5 body设置自适应全屏
2020/05/07 HTML / CSS
印尼披萨外送专家:Domino’s Pizza印尼
2017/12/28 全球购物
Andrew Marc官网:设计师外套的领先制造商
2019/10/30 全球购物
小学生读书感言
2014/02/12 职场文书
2015员工年度考核评语
2015/03/25 职场文书
2016春季小学开学寄语
2015/12/03 职场文书
新员工入职感言范文!
2019/07/04 职场文书
互联网创业商业模式以及赚钱法则有哪些?
2019/10/12 职场文书
Java反应式框架Reactor中的Mono和Flux
2021/07/25 Java/Android
Python中如何处理常见报错
2022/01/18 Python