简介
browser-sync-angular-template 是一个基于 browser-sync 的插件，用于在开发 Angular 应用时提供自动重载和监听文件改变的功能。这个插件可以监听 Angular 模板文件和组件样式文件的改变，自动刷新浏览器，在一些项目中十分方便。
安装
使用以下命令安装：
--- ------- ---------- -----------------------------
配置
在项目的 gulpfile.js 文件中加入以下代码：
----- ----------- - ------------------------
----- --- - -----------------------------------------
----- -- - ---------------------
----------
--- ---
------ ----
---这将在创建 browser-sync 实例后，使用 browser-sync-angular-template 插件初始化，并同时开启自动监听和自动刷新功能。
使用示例
在这个例子中，我们将使用 Angular CLI 来创建一个新的 Angular 应用程序。在项目中安装 browser-sync 和 browser-sync-angular-template：
--- ------- ---------- ------------ -----------------------------
然后创建 Angular 应用程序：
-- --- ------ -- ------
修改 package.json 文件，在 scripts 属性中加入以下代码：
-------- --- ----- ------ -------------------- -------------- --------------- ------ --------- ----------- --- ----- ------------ -------------------- -------------- --------------- ------ ------- -- ---- ------
这里新增了一个 start 命令用于启动 Angular 应用程序，以及 bs-start 命令用于启动 browser-sync。
在项目根目录下创建 gulpfile.js 文件，并写入以下的 gulp 任务代码：
----- ---- - ----------------
----- ----------- - ------------------------
----- --- - -----------------------------------------
----- -- - ---------------------
----------
--- ---
------ ----
---
------------------ ---------- -
---------
------ -----------------------
---
---执行 bs-start 命令来启动应用程序和 browser-sync：
--- --- --------
这样就可以在浏览器中访问 http://localhost:3000 来查看启动的应用程序了。
在编辑器中修改 app.component.html 文件或 app.component.css 文件，浏览器将会自动刷新以显示修改后的内容。
总结
browser-sync-angular-template 是一个方便的 npm 包，在开发 Angular 应用程序时提供了自动刷新和监听文件改变的功能。它可以显著提高 Angular 应用程序的开发效率。需要注意的是，由于它基于 gulp 和 browser-sync，因此在使用之前需要进行一些简单的配置。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60066c8accdc64669dde520e