gulp-connect 插件 connect.reload() 不刷新浏览器以进行以下角度设置

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:8888 时，它实际上会在浏览器中打开文件夹结构，然后我必须手动导航到 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']);