Angular单页应用的浏览器同步

Question

Angular单页应用的浏览器同步

3

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

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

这很好用。使用historyApiFallback（npm模块）意味着当浏览器只需要继续提供index.html时，它不会在转到新的URL路径时出现问题。

我的问题在于文件监视。我尝试了以下方法：

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

由于build-css任务能够正常触发，所以watch任务可以正常工作。然后控制台记录了Reloading Browsers...并且停在那里。浏览器从未获得CSS注入或重新加载。我在这里做错了什么？

请注意，我故意使用的是gulp-watch而不是原生的gulp watch。

- CaribouCode

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Vitor Freitas · Accepted Answer

我建议您使用lite-server。它是一个简单的自定义包装器，可围绕BrowserSync轻松提供SPA服务（您甚至不必配置history api）。

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

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

该模块将自动监视文件更改并保持同步。因此，它将与您的gulp一起使用，因为在执行build-css任务后更新浏览器（因为输出文件将发生更改）。

我目前正在使用它与angular 1、angular 2和vue.js，并且在所有这些情况下都运行良好。