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 相关文章推荐
js中将HTMLCollection/NodeList/伪数组转换成数组的代码
Jul 31 Javascript
jQuery中filter()方法用法实例
Jan 06 Javascript
JavaScript对象数组排序实例方法浅析
Jun 15 Javascript
JavaScript兼容性总结之获取非行间样式案例
Aug 07 Javascript
jQuery图片前后对比插件beforeAfter用法示例【附demo源码下载】
Sep 20 Javascript
JS实现标签页切换效果
May 04 Javascript
js动态添加表格逐行添加、删除、遍历取值的实例代码
Jan 25 Javascript
Vue项目中设置背景图片方法
Feb 21 Javascript
小程序tab页无法传递参数的方法
Aug 03 Javascript
浅谈vue同一页面中拥有两个表单时,的验证问题
Sep 18 Javascript
小程序如何获取多个formId实现详解
Sep 20 Javascript
什么是SOLID
Mar 24 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 程式大小
2006/12/06 PHP
PHP eval函数使用介绍
2013/12/08 PHP
php实现在服务器端调整图片大小的方法
2015/06/16 PHP
php和C#的yield迭代器实现方法对比分析
2019/07/17 PHP
jquery.form.js用法之清空form的方法
2014/03/07 Javascript
jquery制作LED 时钟特效
2015/02/01 Javascript
JS实现点击按钮后框架内载入不同网页的方法
2015/05/05 Javascript
js比较日期大小的方法
2015/05/12 Javascript
浅谈关于JavaScript API设计的一些建议和准则
2015/06/24 Javascript
深入解析JavaScript中的数字对象与字符串对象
2015/10/21 Javascript
js实现文字闪烁特效的方法
2015/12/17 Javascript
微信小程序踩坑记录之解决tabBar.list[3].selectedIconPath大小超过40kb
2018/07/04 Javascript
Vue 第三方字体图标引入 Font Awesome的方法
2018/09/28 Javascript
React降级配置及Ant Design配置详解
2018/12/27 Javascript
JS立即执行函数功能与用法分析
2019/01/15 Javascript
详解Vue源码中一些util函数
2019/04/24 Javascript
Vue项目从webpack3.x升级webpack4不完全指南
2019/04/28 Javascript
微信小程序表单验证WxValidate的使用
2019/11/27 Javascript
JavaScript实现10秒后再次获取验证码
2020/12/02 Javascript
[38:51]2014 DOTA2国际邀请赛中国区预选赛 Orenda VS LGD-CDEC
2014/05/22 DOTA
[08:54]《一刀刀一天》之DOTA全时刻18:十九支奔赴西雅图队伍全部出炉
2014/06/04 DOTA
用python登录Dr.com思路以及代码分享
2014/06/25 Python
Python的subprocess模块总结
2014/11/07 Python
Python multiprocessing模块中的Pipe管道使用实例
2015/04/11 Python
详尽讲述用Python的Django框架测试驱动开发的教程
2015/04/22 Python
Linux下用Python脚本监控目录变化代码分享
2015/05/21 Python
python读取图片并修改格式与大小的方法
2018/07/24 Python
Python导入数值型Excel数据并生成矩阵操作
2020/06/09 Python
师范生自我鉴定范文
2013/10/05 职场文书
营销团队口号
2014/06/06 职场文书
四风批评与自我批评范文
2014/10/14 职场文书
爱国主义教育主题班会
2015/08/13 职场文书
高考满分作文赏析(2篇)
2019/08/12 职场文书
Python 流媒体播放器的实现(基于VLC)
2021/04/28 Python
react antd实现动态增减表单
2021/06/03 Javascript
Vue3.0写自定义指令的简单步骤记录
2021/06/27 Vue.js