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

 更新时间:2016年12月23日 15:45:40   作者:code哒哒  
本文将介绍一个工具--livereload。这是一款能根据你本地文件(html、css、js)的变化,自动跟踪刷新浏览器的实时刷新工具,有了这个工具,会大大减轻你刷新页面的工作量。下面跟着小编一起来看下吧

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

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

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

相关文章

  • NW.js 简介与使用方法

    NW.js 简介与使用方法

    NW.js (原名 node-webkit)是一个基于 Chromium 和 node.js 的应用运行时,通过它可以用 HTML 和 JavaScript 编写原生应用程序.这篇文章主要介绍了NW.js 简介与使用,需要的朋友可以参考下
    2018-02-02
  • js实现数组去重方法及效率對比

    js实现数组去重方法及效率對比

    本文主要介绍了js实现数组去重方法及效率對比。具有很好的参考价值,下面跟着小编一起来看下吧
    2017-02-02
  • vue组件创建的三种方式小结

    vue组件创建的三种方式小结

    这篇文章主要介绍了vue组件创建的三种方式小结,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-02-02
  • js倒计时显示实例

    js倒计时显示实例

    本文分享了js倒计时显示的实例,需要的朋友可以参考借鉴,下面就跟小编一起来看看吧
    2016-12-12
  • js调试工具console.log()方法查看js代码的执行情况

    js调试工具console.log()方法查看js代码的执行情况

    以往都是使用alert的方式查看js代码的执行情况,今天看到有朋友使用console.log函数打印输出函数,变量,对象,下边就console.log的使用情况进行记录
    2014-08-08
  • 用原生js做单页应用

    用原生js做单页应用

    本文主要介绍了用原生js做单页应用的相关知识。具有一定的参考价值,下面跟着小编一起来看下吧
    2017-01-01
  • JS实现旋转木马轮播案例

    JS实现旋转木马轮播案例

    这篇文章主要为大家详细介绍了JS实现旋转木马轮播案例,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-10-10
  • 微信小程序实现点击按钮修改文字大小功能【附demo源码下载】

    微信小程序实现点击按钮修改文字大小功能【附demo源码下载】

    这篇文章主要介绍了微信小程序实现点击按钮修改文字大小功能,涉及微信小程序事件绑定及setData动态修改Page页面data数据,进而控制页面元素属性动态改变的相关操作技巧,需要的朋友可以参考下
    2017-12-12
  • JavaScript实现的超简单计算器功能示例

    JavaScript实现的超简单计算器功能示例

    这篇文章主要介绍了JavaScript实现的超简单计算器功能,可实现基本的四则运算并带有验证功能,代码中备有较为详尽的注释便于理解,需要的朋友可以参考下
    2017-12-12
  • 微信小程序仿今日头条导航栏滚动解析

    微信小程序仿今日头条导航栏滚动解析

    这篇文章主要介绍了微信小程序仿今日头条导航栏滚动解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-08-08

最新评论