javascript - Angular SPA 的浏览器同步

Question

我将浏览器同步与 Angular SPA 结合使用。服务网站看起来像这样:

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

这很好用。 historyApiFallback(npm 模块)的使用意味着浏览器同步在转到新的 URL 路径时不会崩溃，因为它需要做的只是继续为 index.html 提供服务.

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

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

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

请注意，我使用的是 gulp-watch 而不是 native gulp watch。

Answer 1

我建议您使用 lite-server .它是一个围绕 BrowserSync 的简单自定义包装器，可以轻松地为 SPA 提供服务(您甚至不必配置历史记录 api)。

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

“脚本”:{
“开发”:“精简版服务器”
},


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

我目前正在将它与 angular 1、angular 2 和 vue.js 一起使用，并且可以正常工作。