使用 --watch 依次运行两个 Angular CLI 任务答案

【问题标题】：Run two Angular CLI tasks after each other, with --watch使用 --watch 依次运行两个 Angular CLI 任务
【发布时间】：2019-03-31 06:38:57
【问题描述】：

我有两个任务，需要一个接一个地运行：

ng build <library-name> && ng serve

我想在<libary-name> 上监视文件更改，所以我添加了这个：

ng build <library-name> --watch && ng serve

这显然是行不通的，因为手表永远不会结束，所以 ng serve 永远不会被调用。

ng build <library-name> --watch & ng serve

这个解决方案也不好，因为 ng 服务在 ng 构建完成之前就开始了。

有什么方法可以从第一个 ng 构建中捕获 Compilation complete 消息，然后然后让文件观察程序运行？有什么办法可以像这样启动观察者：

ng build <library-name> && --watch-the-libary-please & ng serve

【问题讨论】：

如果你不--watch第一个，你只能让他们一个接一个地执行。另一种方法是在单独的会话中简单地执行构建命令。
是的，这是我们现在的解决方法，但我希望有更好的解决方案。
编写一个 bash 脚本来做到这一点。如果需要定期触发，您甚至可以创建自定义服务。
@ForestG 你能看看我的解决方案，它对你有用吗？在对 lib 进行任何更改后，它将重建并提供服务。因此，现在您不需要 --wach 标志，因为脚本正在保护更改。或者，也许我把它弄得太复杂了。无论如何，我想知道你的想法。

标签： angular angular-cli angular-cli-v6

【解决方案1】：

您可以使用 npm 包concurrently，它允许并行运行多个命令。

【讨论】：

谢谢，但这并不能解决我的问题：我需要在第一次构建完成后启动第二个进程。
你可以运行ng build && concurrently "ng build --watch" "ng serve"。
是的，这个解决方案有效，但是你也可以不使用它：这与ng build tariff-lib && (ng build tariff-lib --watch & ng serve) 基本相同
嗯...这个答案“足够好”，但实际上并没有按照 OP 的要求做。这会同时（obv）而不是按顺序运行它们。

【解决方案2】：

好的，我可能已经为您找到了解决方案。我编写了简单的 Python 脚本，它将通过计算其 sha1sum 来检查目录（在本例中为您的库）是否已更改。如果它实际上已更改，那么它将运行您的 ng build 和 ng serve

命令

import time
import os
from checksumdir import dirhash

directory = '/YOUR/PATH/TO/LIBRARY'
initial_sha1 = dirhash(directory, 'sha1')

modified = False

while modified is False:
    current_sha1 = dirhash(directory, 'sha1')
    if initial_sha1 != current_sha1:
        print("Files has been hanged")
        os.system('ng build <libary-name>')
        os.system('ng serve')
        modified = True
    else:
        time.sleep(10)

如果您想无限期地运行此程序，而不是将标志 modified 更改为 True，请将首字母 sha 的值更改为当前的 initial_sha1 = current_sha1 并在需要时终止程序。

您可能需要安装此软件包：

pip install checksumdir

这适用于 Python 2.7 和 3.X（您可能需要使用 pip3 安装 checksumdir）

编辑

您可能需要在构建应用的目录下执行此脚本，或在 ng buld

之前添加

os.system('cd /PATH/WHERE/YOU/BUILD')

【讨论】：

谢谢，但是仅仅为此使用 python 是一种矫枉过正。另外，我相信这个脚本每次都会重新运行 ng serve 而不会停止前一个？
@ForestG 是的，它不会重新运行 ng serve，但这很容易实现。我只是一开始没有考虑清楚。

【解决方案3】：

我遇到了同样的问题，我可以提出解决方案。所以，把它留在这里。

拥有以下脚本，npm start 将同时启动 ng build my-lib 和 ng build serve，无论您在 my-app 或 my-lib 中进行更改，都会触发构建。

要执行的步骤是：

删除我的库出路径dist-lib处的目录
开始使用 --watch 选项构建 my-lib
运行wait-for-lib.js 等待创建my-lib 输出目录
为my-app 启动开发服务器

package.json

{
  "scripts": {
    "start": "npm-run-all clean:lib --parallel start:**",
    "start:app": "node ./scripts/wait-for-lib.js && ng serve",
    "start:lib": "ng build my-lib --watch",
    "clean:lib": "shx rm -rf ./dist-lib"
  },
  "devDependencies": {
    "npm-run-all": "^4.1.5",
    "shx": "^0.3.3"
  }
}

angular.json

{
  "projects": {
    "my-app": {
      ...
      "architect": {
        "build": {
          ...
          "options": {
            "outputPath": "dist"
          },
          ...
        }
      }
    },
    "my-lib": {
      ...
      "architect": {
        "build": {
          ...
          "options": {
            "outputPath": "dist-lib"
          },
          ...
        }
      }
    },
  },
  "defaultProject": "my-app"
}

./scripts/wait-for-lib.js

const fs = require('fs');

const pathToMyLib = './dist-lib/my-lib';

function waitFor(path) {
    console.log(`Waiting for ${path} is created...`);
    if (!fs.existsSync(path))
        setTimeout(() => waitFor(path), 1000);
}

waitFor(pathToMyLib);

【讨论】：