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

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

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>

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

阅读 4.7k
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进