实现前端可视化开发的livereload工具[推荐]

在前端开发中，我们会频繁的修改html、css、js，然后刷新页面，打开效果，再调整刷新，不知不觉就浪费了我们很多时间。有什么办法吗？我在编辑器中更改代码后，只需保存它，浏览器就可以实时刷新它。通过不懈的努力，我们找到了这样一个工具——liver eload。这是一个实时刷新工具，可以根据本地文件(html、css、js)的变化自动跟踪和刷新浏览器。有了这个工具，刷新页面的工作量会大大减少。

安装chrome插件

这个我就不详细解释了。去chrome商店下载并安装一个像livereload这样的插件。安装完成后，浏览器上会出现这样一个小图标

，表示插件安装成功。

Livereload基本用法

首先，使用npm安装livereload模块

npm安装-g livereload

在网站的当前目录中运行命令行，并输入livereload命令，将出现以下内容

这证明了livereload已经成功运行，我们也可以看到chrome上的小图标会变得坚固

，指示连接成功。

然后我们在网站编辑器中更改响应文本，保存，浏览器可以自动刷新。方便吗？

编写livereload脚本

以上只是实现了livereload的基本功能。实际上，livereload也可以编写脚本来运行。

首先，使用npm安装吞咽和吞咽-livereload模块

在NPM初始化NPM安装-保存-开发大口NPM安装-保存-开发大口-实时重装之后，在你网站的根目录下创建一个新的大口文件. js文件，然后写一个脚本

var大口=require('大口')；var liveReload=require('大口-LIVELOAD ')；gough . task(' watch '，function(file){/* * * monitor livereload */livereload . listen()；/* * *监控文件更改，并将文件流式传输到liveReload模块进行浏览器刷新*/gought . watch('。/*.' html '，函数(文件){console.log(文件)；大口。src('。/*.html ')。pipe(LiverLoad())；});});在命令窗口中运行watch任务，更改编辑器文本，也可以达到实时刷新的效果。

好了，这个工具就介绍到这里了，希望大家喜欢。

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