angular - 将 HTML 文件复制到 wwwroot 的最佳方法？

Question

我正在开始使用 ASP.Net Core 1.0 托管的 Angular 2 (RC4) 之旅。我一直在关注这个网站上的 hello world 教程，到目前为止效果很好:
http://geekswithblogs.net/HumpreyCogay/Default.aspx

每当我对位于 $project/app/app.component.ts 的 app.component.ts 文件进行更改时，我都会看到我的更改反射(reflect)在 $project/wwwroot/app/app.component.js 文件中。万岁。据我了解，Visual Studio 2015 足够聪明，知道我修改了一个 typescript 文件，知道它必须转换它，并根据我的 tsconfig.xml 将它转储到 wwwroot 中。 FWIW，我的 tsconfig.json 看起来像这样:

{ 
  "compileOnSave": true,
  "compilerOptions": {
    "target": "es5",
    "module": "system",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false,
    "outDir": "wwwroot/app/"
      }, 
  "exclude": [ 
    "node_modules", 
    "wwwroot" 
  ] 
}

因此，app.component.ts 将模板列为内联 html。如果我将其更改为:

 template: '<h1>My First Angular 2 App</h1>'   

到

templateUrl: './app/app.component.html' 

然后 ts 文件以 js 格式被尽职地转译到 wwwroot，但我创建的 html 文件($project/app/app.component.html)没有。如果我手动将它复制到那里，测试应用程序会按预期工作。

因此，每当我更改/添加一个 html 文件时手动将 html 文件复制到 wwwroot 是行不通的。让这种事情自动过去的推荐做法是什么？我的 .scss 文件已经准备就绪(它很高兴地生成了一个 compilerconfig.json)，所以我想有一些可用的机制可用于 .html 文件。

我还有一个 gulpfile.js 来清理/复制 node_modules 到 $project/wwwroot/libs，但我不确定这是否是复制 .html 文件的正确位置，也不确定自动魔术-它的本质。对于我的 node_module 内容，我会在需要时手动触发清理和复制任务。

Answer 1

看看像 gulp 或 grunt 这样的工具。 它们通常用于此类任务。 他们有观察者观察例如 html 文件的变化，并在检测到变化时执行某些任务，比如将它们复制到不同的文件夹。 正是您所需要的。

我碰巧也有一个使用 .NET Core rc1 和 Angular 2 RC4 的项目。 这是我的 gulpfile 的摘录(它还会监视我的 SASS 文件的更改并在更改时编译它们):

var scriptsSource = "./scripts/";
var scriptsDest = "./wwwroot/app";

var sassSource = "./sass/";
var sassDest = "./wwwroot/Content/css";

gulp.task("html", function ()
{
    gulp.src(scriptsSource + "**/*.html")
        .pipe(gulp.dest(scriptsDest));
});


gulp.task("sass", function ()
{
    return gulp.src(sassSource + "MovieStyles.scss")
    .pipe(sass().on("error", sass.logError))
    .pipe(gulp.dest(sassDest));
});

gulp.task("watch", function()
{
    gulp.watch(scriptsSource + "**/*.html", ["html"]);
    gulp.watch(sassSource + "**/*.scss", ["sass"]);
});

gulp.task("default", ["sass", "html", "watch"]);