在前端开发中,我们会频繁修改HTML,CSS,js文件,然后刷新页面,看效果,然后再调整,再刷新,不知不觉浪费掉我们很多时间。寻找了很长时间,发现了livereload工具。这个工具能够检测本地文件(html、css、js)的变化,自动刷新浏览器页面,大大减轻了刷新页面的工作量。
1.安装chrome插件
到chrome商店,下载安装livereload插件
2.安装livereload模块
首先通过npm安装livereload模块
npm install -g livereload
在网站的根目录运行命令行,输入livereload命令,这时候点击chrome上的小图标,就会变为实心状态,代表连接成功。
然后在编辑器中修改代码,保存,流量拿起自动刷新了。
3.编写livereload脚本
上面实现了livereload的基本功能。实际上,我们也可以编写脚本运行。
首先,利用npm安装gulp、gulp-livereload文件,然后编写脚本
var gulp = require("gulp"); var liveReload = require("gulp-livereload"); var gulp = require('gulp'), livereload = require('gulp-livereload'); gulp.task('watch', function () { // 这里的watch,是自定义的,写成live或者别的也行 var server = livereload(); // app/**/*.*的意思是 app文件夹下的 任何文件夹 的 任何文件 gulp.watch('app/**/*.*', function (file) { server.changed(file.path); }); });
在命令行运行watch任务,更改文本内容,同样能实现实时刷新效果。
gulp watch
此时,你会发现当你修改 app 文件夹下的任何文件,命令行都会有内容输出,说明能够监控到文件的变化,运作正常了。
[/给力]
[/奋斗]