挂入angular-cli构建手表

Question

我想知道是否可以挂钩angular-cli的build/watch命令:

ng build/w

它生成文件并将它们放在项目的/dist文件夹中

我只是想在构建完成后将dist文件夹复制到另一个目录,是否可能？

Answer 1

我成功实现了我想要的并行任务,copyfiles和npm watch:

npm dev依赖项:

"npm-watch": "^0.1.8",
"parallelshell": "^2.0.0",
"copyfiles": "^1.2.0",

package.json片段:

"watch": {
    "copy-files": "dist/*.js"
  },
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "lint": "tslint \"src/**/*.ts\" --project src/tsconfig.json --type-check && tslint \"e2e/**/*.ts\" --project e2e/tsconfig.json --type-check",
    "test": "ng test",
    "pree2e": "webdriver-manager update --standalone false --gecko false",
    "e2e": "protractor",
    "watch": "npm-watch",
    "copy-files": "copyfiles src/** dist/** ../angular",
    "ng-build": "ng build -w",
    "build": "parallelshell \"ng build\" \"npm run watch\" "
  },

然后

npm run build

FWIW手表配置说,如果在dist/*.js中有任何变化,运行"copy-files"npm脚本......

Answer 2

一种方法是运行npm run build并使用postbuild脚本将 index.html 的内容从 dist 文件夹复制到所需文件夹中的 html/cshtml 文件，并将新复制文件中的脚本和链接标签的路径更改为指向 dist 文件夹构建完成后。现在运行ng build --watch并开始开发。我正在使用angular 6and angular-cliwith.Net MVC 4.5和我~\Views\Home用作我想要的目标文件夹。

要在我的项目中运行监视模式，我现在运行npm run build:watch 监视模式有效。以下是我的package.json：

"scripts": {
        "ng": "ng",
        "build": "ng build",
        "build:watch": "npm run build && ng build --watch",
        "build:prod": "ng build --prod && npm run postbuild",
        "postbuild": "npm run copyindex && npm run fixpath",
        "copyindex": "copy /D \".\\dist\\index.html\" \"Views\\Home\\Index.cshtml\" /Y",
        "fixpath": "powershell -Command \"(gc Views\\Home\\Index.cshtml) -replace '(\\w+\\.js|\\w+\\.css)', '~/dist/$1' | Out-File Views\\Home\\Index.cshtml\"",
    },

的package.json解释：运行后，npm run build在postbuild被自动调用。postbuild将调用copyindex和fixpath此起彼伏。

• copyindex将 my 的内容复制dist\index.html到 my Views\Home\Index.cshtml.
• fixpath将添加~/dist/到我的.js文件中所有js和css文件路径的开头Index.cshtml。
• build:watch: 打电话ng build --watch。
• build:prod: 用于生产构建和调用ng build --prod，postbuild一个接一个。

笔记

• 这些命令可以在 Windows 上的任何控制台（cmd 或 bash）中运行。
• 我powershell在我的fixpath. 它可以替换为您最喜欢的工具。

Answer 3

如果您只想更改它输出到的文件夹，您可以在angular-cli.json文件中进行设置。有一个“ outdir”设置，您可以将其更改为您想要输出到的文件夹。