首页 > gulp-connect 如何实现livereload界面自动刷新?

gulp-connect 如何实现livereload界面自动刷新?

目的:使用gulp-connect实现, 监听html/css/js等文件如有变化, 界面即时自动刷新。
测试:我通过https://www.npmjs.com/package/gulp-connect官网demo例子代码未能实现,需要自己手动F5刷新。
项目目录:

gulpfile.js代码:

var gulp = require('gulp'),
  connect = require('gulp-connect');
 
gulp.task('connect', function() {
  connect.server({
    root: 'app',
    port: 8000,
    livereload: true
  });
});
 
gulp.task('html', function () {
  gulp.src('./app/*.html')
    .pipe(connect.reload());
});
 
gulp.task('watch', function () {
  gulp.watch(['./app/*.html'], ['html']);
});
 
gulp.task('default', ['connect', 'watch']);

index.html代码:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  s
</body>
</html>

请问各位大大,那里错了或者那里需要调整吗?

【热门文章】
【热门文章】