Question

角度应用的文件夹结构：

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 dev服务器，因为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']);

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

1 个答案: