简介
browser-sync-angular-template 是一个基于 browser-sync 的插件，用于在开发 Angular 应用时提供自动重载和监听文件改变的功能。这个插件可以监听 Angular 模板文件和组件样式文件的改变，自动刷新浏览器，在一些项目中十分方便。
安装
使用以下命令安装：
npm install --save-dev browser-sync-angular-template
配置
在项目的 gulpfile.js 文件中加入以下代码：
const browserSync = require('browser-sync');
const bsa = require('browser-sync-angular-template');
const bs = browserSync.create();
bsa.init({
bs: bs,
watch: true
});这将在创建 browser-sync 实例后，使用 browser-sync-angular-template 插件初始化，并同时开启自动监听和自动刷新功能。
使用示例
在这个例子中，我们将使用 Angular CLI 来创建一个新的 Angular 应用程序。在项目中安装 browser-sync 和 browser-sync-angular-template：
npm install --save-dev browser-sync browser-sync-angular-template
然后创建 Angular 应用程序：
ng new my-app cd my-app
修改 package.json 文件，在 scripts 属性中加入以下代码：
"start": "ng serve --open --disable-host-check --proxy-config proxy.conf.json --host 0.0.0.0", "bs-start": "ng serve --open=false --disable-host-check --proxy-config proxy.conf.json --host 0.0.0.0 && gulp start"
这里新增了一个 start 命令用于启动 Angular 应用程序，以及 bs-start 命令用于启动 browser-sync。
在项目根目录下创建 gulpfile.js 文件，并写入以下的 gulp 任务代码：
-- -------------------- ---- -------
----- ---- - ----------------
----- ----------- - ------------------------
----- --- - -----------------------------------------
----- -- - ---------------------
----------
--- ---
------ ----
---
------------------ ---------- -
---------
------ -----------------------
---
---执行 bs-start 命令来启动应用程序和 browser-sync：
npm run bs-start
这样就可以在浏览器中访问 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