More than code
Welcome to the website

gulp之livereload自动刷新页面

在前端开发中,我们会频繁修改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 文件夹下的任何文件,命令行都会有内容输出,说明能够监控到文件的变化,运作正常了。

赞(0) 打赏
未经允许不得转载:李帅帅空间 » gulp之livereload自动刷新页面

评论 2

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #1

    [/给力]

    ice__point1年前 (2017-05-20)回复
  2. #2

    [/奋斗]

    憶昔年1年前 (2017-06-28)回复

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏