gulp-connect插件connect.reload()不刷新以下angular设置的浏览器

Question

angular应用的文件夹结构：

src
  client
    app
    assets
    index.html
  server
gulpfile.js

我有以下任务来创建一个开发服务器，并尝试观察index.html中的更改，如果发生更改，我将尝试重新加载页面

gulp.task('dev-server',function(){
  connect.server({
    port: 8888,
    livereload: true
  });
  gulp.watch('./src/client/app/index.html', ['reload']);
});

gulp.task('reload', function(){
  gulp.src('./src/client/index.html')
    .pipe(connect.reload());
});

当前行为:运行dev-server任务创建服务器。在index.html中发生变化时，会按预期触发重新加载任务。但是，浏览器不会自动刷新。

问题1:如何使浏览器窗口/特定选项卡在更改时自动刷新？

问题2:当我启动localhost:88888时，它实际上会在浏览器中打开文件夹结构，从那里我必须手动导航到index.html。如何直接启动index.html？

Answer 1

使用fallback: './src/client/index.html'，您可以修复index.html的直接打开。但在我的本地设置中，livereload也不起作用。不知道出了什么问题。

我建议使用browser-sync作为livereload开发服务器，因为gulp-connect似乎已被弃用。

然后，您可以创建一个gulp文件，如下所示：

var gulp = require('gulp');
var browserSync = require('browser-sync');
var reload = browserSync.reload;

// watch files for changes and reload
gulp.task('serve', function() {
browserSync({
    server: {
      baseDir: 'src/client'
    }
 });

 gulp.watch(['*.html', 'styles/**/*.css', 'scripts/**/*.js'], {cwd: 'src/client'}, reload);
});

gulp.task('default', ['serve']);