将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文件进行更改时,我都会看到我的更改会反映在$ project/wwwroot/app/app.component.js文件中.万岁.据我所知,Visual Studio 2015非常智能,知道我修改了一个打字稿文件,知道它必须将其转换,然后根据我的tsconfig将其转储到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"]);