Angular应用运行时，如何在文件变更时自动执行脚本？

完全可行，以下是两种实用方案：

方案一：用nodemon监听MD文件+并行运行Angular Dev Server #

这是最快捷的实现方式，通过nodemon监听Markdown文件变化自动触发转换脚本，同时和Angular的开发服务并行运行：

1. 安装依赖：

   npm install nodemon npm-run-all --save-dev
   

2. 在package.json的scripts中新增两个命令：

   "scripts": {
     "md:watch": "nodemon --ext md --exec \"node ./scripts/md-to-html.js\"",
     "start:dev": "npm-run-all -p md:watch start"
   }
   

   如果你只需要监听特定目录下的MD文件，可以修改nodemon命令，比如只监听src/docs目录：

   nodemon --watch ./src/docs --ext md --exec "node ./scripts/md-to-html.js"
   

3. 启动项目时改用npm run start:dev，之后修改任意MD文件，nodemon会自动触发转换脚本，Angular Dev Server检测到生成的HTML文件变化后，会自动刷新页面。

方案二：修改Angular CLI配置，纳入MD文件监听 #

通过配置Angular的构建系统，让它在检测到MD文件变化时自动执行转换脚本：

1. 编辑angular.json，找到你的项目配置下的architect > build > options，确保生成的HTML文件所在目录被纳入assets（这样Angular会监听该目录的变化）：

   "assets": [
     "src/favicon.ico",
     "src/assets",
     "src/generated-html" // 这里填你的HTML输出目录
   ]
   

2. 在architect下新增一个自定义的md:build任务：

   "architect": {
     "md:build": {
       "builder": "@angular-devkit/build-angular:shell",
       "options": {
         "command": "node ./scripts/md-to-html.js"
       }
     },
     // ...其他已有配置
   }
   

3. 修改serve任务的配置，添加依赖并开启监听：

   "serve": {
     "builder": "@angular-devkit/build-angular:dev-server",
     "options": {
       "browserTarget": "your-project-name:build"
     },
     "configurations": {
       "production": {
         "browserTarget": "your-project-name:build:production"
       }
     },
     "dependsOn": ["md:build"],
     "watch": true
   }
   

   注：这种方式需要Angular CLI版本支持shell构建器，若版本较低可能需要调整。

关键注意事项 #

• 确保你的MD转换脚本输出的HTML文件，放在Angular Dev Server会监听的目录下（比如src/assets子目录），这样Angular才能检测到文件变化并自动刷新。
• 原有的prebuild脚本可以保留，确保生产构建时依然会执行MD转换。

内容的提问来源于stack exchange，提问作者user2977624