Question

我有两个任务，需要彼此依次运行：

ng build <libary-name> && ng serve

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

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

这显然是行不通的，因为手表永远不会结束，所以永远不会叫到发球。

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

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

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

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

？

Answer 1

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

Answer 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')

Answer 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);

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

3 个答案:

编辑