Angular/Django应用开发工作流优化：实现自动构建部署

下面给你几个现成的实现方案，不用自己从零整合：

方案1：直接让Angular构建输出到Django静态目录 #

这是最省事的方式，省去复制步骤：

1. 修改Angular项目根目录下的angular.json，找到architect.build.options.outputPath，把它改成Django应用静态目录的绝对或相对路径，比如：

   "outputPath": "../your-django-app/static/angular"
   

2. 在Angular的package.json里添加预处理脚本，每次构建前自动清空目标目录：

   "scripts": {
     "prebuild": "rm -rf ../your-django-app/static/angular/*",
     "build": "ng build",
     "watch": "ng build --watch"
   }
   

3. 启动Angular的watch模式：npm run watch，之后你编辑Angular代码保存时，会自动清空旧文件、重新构建并直接输出到Django的静态目录。

方案2：用npm脚本+监听工具整合全流程 #

如果不想修改Angular默认输出目录，可以用nodemon这类工具监听源码变化，自动执行构建、删除、复制的全流程：

1. 安装nodemon（本地开发依赖）：npm install -D nodemon
2. 在package.json里添加脚本：

   "scripts": {
     "sync:django": "ng build && rm -rf ../your-django-app/static/angular/* && cp -r dist/your-angular-app/* ../your-django-app/static/angular/",
     "watch:sync": "nodemon --watch src --exec 'npm run sync:django'"
   }
   

3. 运行npm run watch:sync，之后每次修改Angular源码保存，都会自动触发整套同步流程。

方案3：用系统原生文件监听工具实现实时同步 #

如果你的系统是Linux/macOS，可以用inotifywait这类原生工具监听Angular的dist目录，一旦有变化就同步到Django静态目录：

1. 先启动Angular的watch构建：ng build --watch
2. 新建一个sync.sh脚本文件，内容如下：

   while inotifywait -r -e modify,create,delete dist/your-angular-app; do
     rm -rf ../your-django-app/static/angular/*
     cp -r dist/your-angular-app/* ../your-django-app/static/angular/
   done
   

3. 给脚本添加执行权限并运行：chmod +x sync.sh && ./sync.sh，这样dist目录有更新就会自动同步。

额外注意事项 #

• 确保Django的settings.py里配置了正确的静态文件路径，比如：

  STATIC_URL = '/static/'
  STATICFILES_DIRS = [
      BASE_DIR / 'static',
  ]
  

• 开发环境下Django开启DEBUG=True时，会自动从STATICFILES_DIRS读取静态文件，无需手动执行collectstatic。

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