在前端开发中,我们将修改HTML,CSS和JS的频繁,然后刷新页面,打开效果,调整和更新,我们将失去我们的时间而不自知。没有办法,在编辑我改代码,只要你保存,浏览器可以在实时更新。经过不懈的努力,这样的一个工具,——livereload,被发现了。这是一个实时更新的工具,可以自动跟踪和基于本地文件的改变你的浏览器的刷新(HTML,CSS,JS)。使用此工具,您将大大减少刷新页面的工作量。

安装Chrome插件

这并没有详细解释。去Chrome商店,下载并安装livereload这样的插件。安装后,浏览器上会有一个小图标。

对livereload基本使用

首先,使用新安装的livereload模块

NPM安装- G livereload

在网站的当前目录运行命令行输入livereload命令,将出现如下


这证明了livereload已经成功运行,而且我们也可以看到,在浏览器的小图标会变成固体

然后我们在网站编辑器中修改响应文本,保存,并且浏览器可以自动刷新。是否非常方便

livereload脚本写作

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

首先,使用NPM安装杯和杯livereload模块


NPM init
安装,节省开发杯
安装,节省开发大口livereload NPM


安装完成后,创建你的站点的根目录上的一个新的gulpfile.js文件和写剧本


var =需要();
无功livereload =需要(大口livereload );
Gulp.task(看

*听livereload
* /
livereload.listen();

*听文件的变化,通过文件流到livereload模块浏览器刷新
* /
Gulp.watch(, / *。HTML
console.log(文件);
Gulp.src(, / * .html)。Pipe(livereload());
});
});



监视任务在命令窗口中运行,编辑器文本被更改,以及实时刷新效果。


这个工具是在这里介绍的。希望你能喜欢。

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