前端可视化开发--liveload
在前端开发中,我们会频繁的修改html、css、js,然后刷新页面,开效果,再调整,再刷新,不知不觉会浪费掉我们很多时间。有没有什么方法,我在编辑器里面改了代码以后,只要保存,浏览器就能实时刷新。经过不懈的努力,发现了这么一个工具--livereload。这是一款能根据你本地文件(html、css、js)的变化,自动跟踪刷新浏览器的实时刷新工具,有了这个工具,会大大减轻你刷新页面的工作量。
安装chrome插件
这个就不做详细解释了,去chrome商店,下载安装livereload这么一个插件,安装完成后,浏览器上会出现这么一个小图标 就表示插件安装成功了。
livereload基本使用
首先使用npm安装livereload模块
npm install -g livereload
在网站的当前目录运行命令行,输入livereload
命令,会出现如下
这就证明livereload已经运行成功,我们还可以看到chrome上的小图标会变成实心状态
这个就代表连接成功。
然后我们在网站编辑器中改变响应文字,保存,浏览器就可以自动刷新了。是不是很方便?
编写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
任务,更改编辑器文本,同样能实现实时刷新效果。
好了,这款工具就介绍到这里了,希望各位喜欢。
前端可视化开发--liveload的更多相关文章
- 前端可视化开发-livereload
在前端开发中,我们会频繁的修改html.css.js,然后刷新页面,开效果,再调整,再刷新,不知不觉会浪费掉我们很多时间.有没有什么方法,我在编辑器里面改了代码以后,只要保存,浏览器就能实时刷新.经过 ...
- Chrome插件LiveStyle结合Sublime Text3编辑器实现高效可视化开发
LiveStyle是Chrome中提高开发效率的一款CSS编辑器插件.利用LiveStyle和Sublime Text3编辑器结合可实现可视化开发,一次配置,简单易用! 本文由前端交流QQ群管理员—— ...
- 可视化开发_AppInventor2似乎被抛弃了
工具 blockly google,mixly,scratch,app inventor2 的分别 可视化编程,青雀,来自 白鹭 没源码 如果想二次开发呢,初版拖拽控件生成,后期维护的时候找程序员加功 ...
- React 可视化开发工具 Shadow Widget 非正经入门(之六:markdown)
本系列博文从 Shadow Widget 作者的视角,解释该框架的设计要点.本篇讲解 Markdown 在 Shadow Widget 中的应用. Markdown 在 Shadow Widget 中 ...
- React 可视化开发工具 shadow-widget 的非可视开发方法
Shadow Widget 提倡在可视设计器中开发用户界面,输出转义标签,而非 JSX.许多童鞋可能不知道 SW 同样支持用 JSX 设计界面,开发体验比原生 React 编程好出很多,本文就介绍这方 ...
- 构建一个基本的前端自动化开发环境 —— 基于 Gulp 的前端集成解决方案(四)
通过前面几节的准备工作,对于 npm / node / gulp 应该已经有了基本的认识,本节主要介绍如何构建一个基本的前端自动化开发环境. 下面将逐步构建一个可以自动编译 sass 文件.压缩 ja ...
- [web建站] 极客WEB大前端专家级开发工程师培训视频教程
极客WEB大前端专家级开发工程师培训视频教程 教程下载地址: http://www.fu83.cn/thread-355-1-1.html 课程目录:1.走进前端工程师的世界HTML51.HTML5 ...
- [资料搜集狂]D3.js数据可视化开发库
偶然看到一个强大的D3.js,存档之. D3.js 是近年来十分流行的一个数据可视化开发库. 采用BSD协议 源码:https://github.com/mbostock/d3 官网:http://d ...
- 基于webpack的前端工程化开发解决方案探索(一):动态生成HTML(转)
1.什么是工程化开发 软件工程的工程化开发概念由来已久,但对于前端开发来说,我们没有像VS或者eclipse这样量身打造的IDE,因为在大多数人眼中,前端代码无需编译,因此只要一个浏览器来运行调试就行 ...
随机推荐
- [Python]环境配置之pip加速
背景 学习 Python 的话,仅掌握标准库是远不够的,有很多好用的第三方库我们也需要用到的,比如,由鼎鼎大名的 K 神开发的爬虫必不可少的 requests 库,一般都是必装的库吧.安装第三方库当然 ...
- SpringBoot 整合邮件oh-my-email 实现发送邮件功能
导读 最近手头上要负责整个Message Gateway服务的搭建,涉及到:微信推送(点我直达).短信.邮件等等,到github上发现有个微型的开源邮件框架,整理下来,以备项目中使用到,到时候应该会使 ...
- 14_TTS
TTS(Text to speech)为语音合成的意思.本课程主要介绍了TTS的使用方法. 1 package cn.eoe.tts; 2 3 import java.util.Locale; 4 i ...
- nginx,wsgi项目部署
1.一些重要概念 https://www.cnblogs.com/xiaonq/p/8932266.html 1.1web容器 什么是web容器 1.web容器是帮助我们部署java丶php丶pyth ...
- PyQt(Python+Qt)学习随笔:树型部件QTreeWidget中当前列currentColumn和选中项selectedItems访问方法
老猿Python博文目录 专栏:使用PyQt开发图形界面Python应用 老猿Python博客地址 当前列访问方法 树型部件QTreeWidget的currentColumn()方法返回当前项中得到焦 ...
- PyQt(Python+Qt)学习随笔:Qt Designer中QAbstractButton派生按钮部件的icon属性和iconSize属性
icon属性 icon属性保存按钮上展示的图标,图标的缺省大小由图形界面的样式决定,但可以通过 iconSize 属性进行调整. 图标的几种子属性状态的含义与QWidget的windowIcon属性相 ...
- AutumnWater 秋水SRC平台
持续给自己挖坑,简单介绍一下AutumnWater 秋水SRC平台趴: SRC开源漏洞响应平台 AutumnWater 秋水SRC平台 后端使用Python-Flask(蓝图)编写 前端使用少量VUE ...
- 水星路由器自动更换IP工具
这个工具是本人抢火车票的时候,自己写的换IP工具,仅支持自己的水星,其他水星不知道,请自测!!!! 点击更换IP,他会断开链接,重新拨号!!(达到更换IP的目的) !!开发语言:易语言(源码在下方)使 ...
- LZZ磁力资源搜索4.2.2,整合多个站点,大部分资源都能搜到
资源搜索 4.2.2.20200310网友提出的功能已完成1:新增 时间日期排序,单击表头或右键菜单选择,即可自动排序2:新增 搜索完毕 音效开启或关闭 选项3:资源站点 Sunyaa 由聚合站点改为 ...
- MySQL技术内幕InnoDB存储引擎(一)——MySQL体系结构和存储引擎
1.数据库和实例 数据库(database)和实例(instance)不能混淆. 什么是数据库 数据库是物理操作系统文件或其他文件类型的集合.说白了,就是存储着的文件,不会运行起来,只能被实例增删改查 ...