Question

我正在使用与Angular SPA的浏览器同步。服务该网站看起来像这样：

gulp.task('serve', function() {
  browserSync.init(null, {
    server: {
      baseDir: './',
      middleware: [historyApiFallback()]
    }
  });
});

这很好用。使用historyApiFallback（npm模块）意味着当进入新的网址路径时，浏览器同步并不会让人感到不安，因为它需要做的只是继续为index.html提供服务。

我遇到的问题是看文件。我试过这个：

gulp.task('watch', function() {
  watch('./src/scss/**/*.scss', function() {
    runSequence('build-css', browserSync.reload);
  });
});

监视任务确实有效，因为build-css任务触发正常。然后控制台记录Reloading Browsers...并挂起。浏览器永远不会获得CSS注入或重新加载。我在这里做错了什么？

请注意，我故意使用gulp-watch而不是本机gulp值。

Answer 1

我建议您使用lite-server。它是BrowserSync的一个简单的自定义包装器，可以轻松地为SPA提供服务（您甚至不需要配置历史API）。

您可以通过在scripts中的package.json对象中简单添加条目并运行以下命令来使用它：npm run dev。

"scripts": { "dev": "lite-server" },

模块将自动监视文件的更改并保持同步。所以它会与你的gulp一起工作，因为它会在build-css任务执行后更新你的浏览器（因为输出文件会改变）。

我目前正在使用角度1，角度2和vue.js并且与所有人一起使用。

Angular SPA的浏览器同步

1 个答案: