Angular 2 + Typescript 編譯器複製 html 和 css 文件

在 Angular2 中，我會有

"outDir": "dist/app"

在 tsconfig.json 中。因此，轉譯的 .js 和 .map 文件會生成在 /dist/app/ 資料夾及其子資料夾中。這一切運作正常。

在我的 components.ts 文件中，我也像這樣使用了引用的 HTML 和 CSS

@Component({
  selector: 'my-app', 
  templateUrl: 'app/appshell/app.component.html',
  styleUrls: ['app/appshell/app.component.css'],
  ......
}

有沒有辦法讓編譯器也將整個專案中引用的 HTML 和 CSS 檔案一起複製？如果可以，我該如何配置我的 tsconfig.json？

我查看了這裡的編譯器選項 https://www.typescriptlang.org/docs/handbook/compiler-options.html，但沒有找到任何關於複製 HTML/CSS 文件的資訊。

更新： 我的資料夾結構是這樣的

Root
  |--app       // for ts
  |--dist/app  // for js

tsconfig.json

"outDir": "dist/app"

package.json

{
  "name": "TestApp",
  "version": "1.0.0",
  "scripts": {
    "start": "tsc && concurrently \"tsc -w\" \"lite-server\" ",
    "html": "find ./app -name '*.html' -type f -exec cp --parents {} ./dist \\;",
    ......
}

它不會複製 HTML 檔案。不過沒有錯誤。

再次更新：

對於使用 Linux 作業系統的人來說，Bernardo 的解決方案是可行的。對於使用 Windows 作業系統的人來說，以下的方法應該可行。

  "scripts": {
    "html": "XCOPY /S /y .\\app\\*.html .\\dist\\app" }

答案＃1

對於一個與作業系統無關的解決方案，使用 copyfiles

npm install copyfiles --save-dev

然後在 package.json 中添加一個腳本

"scripts": {
  "html": "copyfiles -u 1 app/**/*.html app/**/*.css dist/"
}

現在 npm run html 應該會將所有 css 和 html 檔案從 app/ 資料夾複製到 dist/app/

編輯：我想修改我的回答，指出 angular-cli。這個命令列工具由 angular 團隊支持，能讓打包變得輕而易舉（ng build --prod），還有其他功能。

答案＃2

不，TypeScript 編譯器只是用於 *.ts 檔案。

你必須使用像 cp 這樣的複製方法在 npm 腳本或例如 grunt-contrib-copy 中複製其他文件，如 *.html 和 *.css。

使用 npm 腳本的範例：

"scripts": {
  "html": "find ./app -name '*.html' -type f -exec cp --parents {} ./dist \\;"
}

只需在終端機中運行 npm run html。

使用 grunt 的範例：

copy: {
      html: {
          src: ['**/*.html'],
          dest: 'dist',
          cwd: 'app',
          expand: true,
      }
}