livereload工具实现前端可视化开发【推荐】

在前端开发中，我们会频繁的修改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任务，更改编辑器文本，同样能实现实时刷新效果。

好了，这款工具就介绍到这里了，希望各位喜欢。

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持我们！

赞 (0)

相关推荐

  • 详解Grunt插件之LiveReload实现页面自动刷新（两种方案）

    方案一:grunt-livereload + Chrome Plug-in 优点:安装.配置简单方便. 缺点:需要配合指定的浏览器插件(Firefox也有相关插件,IE么你懂的). 1. 需要安装2个插接件:grunt-contrib-watch.connect-livereload 执行命令: 复制代码 代码如下: npm install --save-dev grunt-contrib-watch connect-livereload 2. 安装浏览器插件:Chrome LiveReload

  • livereload工具实现前端可视化开发【推荐】

    livereload工具实现前端可视化开发【推荐】

    在前端开发中,我们会频繁的修改html.css.js,然后刷新页面,开效果,再调整,再刷新,不知不觉会浪费掉我们很多时间.有没有什么方法,我在编辑器里面改了代码以后,只要保存,浏览器就能实时刷新.经过不懈的努力,发现了这么一个工具--livereload.这是一款能根据你本地文件(html.css.js)的变化,自动跟踪刷新浏览器的实时刷新工具,有了这个工具,会大大减轻你刷新页面的工作量. 安装chrome插件 这个就不做详细解释了,去chrome商店,下载安装livereload这么一个插件,

  • JS前端可视化GraphQL使用详解

    JS前端可视化GraphQL使用详解

    目录 正文 什么是 GraphQL? 什么是 GraphiQL? 开始 结尾 正文 了解事物幕后的运作方式往往有好处,但并非总是如此. 因为不必使事情过于复杂.而可视化图形界面在处理这么一个场景中,是首当其冲的. 在本文中,我将带你了解如何使用 GraphiQL 来辅助 GraphQL 的开发. 什么是 GraphQL? 在我们谈论 GraphiQL 之前,让我们先谈谈 GraphQL. GraphQL 是一种用于应用程序编程接口 (API) 的开源数据查询和操作语言,也是一种使用现有数据完成查

  • 使用WEB工具快速提高Android开发效率

    正所谓工欲善其事,必先利其器.学习并应用优秀的轮子,可以让我们跑的更快,走的更远.这里所指的工具是广义的,泛指能帮助我们开发的东西,或者能提高我们效率的东西,包括:开发工具,监测工具,第三方代码库等. 在Google的广大支持下,便捷开发Android程序的Native工具层出不穷.其实Android开发涉及到的范围也不小,一些Web工具有时候也会带来事半功倍的效果.有些甚至是一些native应用无法做到的.本文,将简单列举一下本人正在使用的一些工具,当然也会持续更新. 查找优秀的参考工程 co

  • Vue Element前端应用开发之开发环境的准备工作

    Vue Element前端应用开发之开发环境的准备工作

    概述 之前一直采用VS进行各种前端后端的开发,随着项目的需要,正逐步融合纯前端的开发模式,开始主要选型为Vue + Element 进行BS前端的开发,后续会进一步整合Vue + AntDesign的界面套件,作为两种不同界面框架的展现方式.采用Vue + Element 的前端开发和之前的开发模式需要有较大的转变,以及需要接触更多的相关知识,本系列随笔基于循序渐进的学习研究方式,对使用Vue + Element 这种前端开发的各个方面进行一个完整的介绍,并结合我对BS前端已有的框架功能,进行两

  • Vue前端高效开发之列表渲染指令

    v-for指令 说起列表不得不提起循环,v-for指令便是可以在vue中实现循环的操作. v-for指令是基于一个数组来重复渲染的指令,通常就用于显示列表和表格. 语法: <ul v-for="(键,值,索引) in 数组">  <li>{{索引}}:{{值}}:{{键}}</li> </ul> 例: <body> <style> * { margin: 0px; padding: 0px; } ul { list

  • Vue Element前端应用开发之表格列表展示

    Vue Element前端应用开发之表格列表展示

    1.列表查询界面效果 在介绍任何代码处理逻辑之前,我们先来做一个感官的认识,贴上一个效果图,在逐一介绍其中处理的步骤和注意事项. 常规的列表展示界面,一般分为几个区域,一个是查询区域,一个是列表展示区域,一个是底部的分页组件区域.查询区域主要针对常规条件进行布局,以及增加一些全局或者批量的操作,如导入.导出.添加.批量添加.批量删除等按钮:而其中主体的列表展示区域,是相对比较复杂一点的地方,需要对各项数据进行比较友好的展示,可以结合Tag,图标,按钮等界面元素来展示,其中列表一般后面会包括一些对

  • Vue Element前端应用开发之常规Element界面组件

    Vue Element前端应用开发之常规Element界面组件

    目录 1.列表界面和其他模块展示处理 2.常规界面组件的使用 1)表单和表单项.单文本框 2)下拉列表控件的绑定 3)图片展示 4)第三方扩展控件 3.自定义组件的创建使用 1.列表界面和其他模块展示处理 常规的列表展示界面,一般分为几个区域,一个是查询区域,一个是列表展示区域,一个是底部的分页组件区域.查询区域主要针对常规条件进行布局,以及增加一些全局或者批量的操作,如导入.导出.添加.批量添加.批量删除等按钮:而其中主体的列表展示区域,是相对比较复杂一点的地方,需要对各项数据进行比较友好的展

  • VSCode Vue开发推荐插件和VSCode快捷键(小结)

    首先这几个是VSCode推荐Vue开发必备的插件 Vetur -- 语法高亮.智能感知.Emmet等 包含格式化功能, Alt+Shift+F (格式化全文),Ctrl+K Ctrl+F(格式化选中代码,两个Ctrl需要同时按着) EsLint -- 语法纠错 Debugger for Chrome -- 映射vscode上的断点到chrome上,方便调试(配置有点麻烦,其实我没用这个) Auto Close Tag -- 自动闭合HTML/XML标签 Auto Rename Tag -- 自动

  • Vue Element前端应用开发之常规的JS处理函数

    1.常规集合的filter.map.reduce处理方法 filter函数的主要用途是对数组元素进行过滤,并返回一个符合条件的元素的数组 const nums = [10,20,30,111,222,333] let newNums=nums.filter(function(n){ return n<100 }) 输出: [10,20,30] map函数是对数组每个元素的映射操作,并返回一个新数组,原数组不会改变将newNums中每个数字乘2 const nums = [10,20,30,111

  • Vue Element前端应用开发之树列表组件

    Vue Element前端应用开发之树列表组件

    1.常规树列表控件的使用 众所周知,一般界面很多情况涉及到树列表的处理,如类型展示,如果是一层的,可以用下拉列表代替,如果是多个层级的,采用树控件展示会更加直观. 在Element里面也有一个el-tree的控件,如下所示,这里主要对它的各种属性和方法进行介绍. 简单的代码如下所示 <el-tree :data="data" @node-click="handleNodeClick"></el-tree> 主要在script部分里面指定它的d

随机推荐