Best way to copy HTML files to wwwroot?

Question

I'm starting my journey into Angular 2 (RC4) hosted on ASP.Net Core 1.0. I've been following a hello world tutorial from this site, and it has worked well so far:
http://geekswithblogs.net/HumpreyCogay/Default.aspx

Whenever I make changes to the app.component.ts file located at $project/app/app.component.ts, I see that my changes are reflected in $project/wwwroot/app/app.component.js file. Hooray. It is my understanding the Visual Studio 2015 is smart enough to know that I modified a typescript file, knows it has to transpile it, and dumps it into the wwwroot based on my tsconfig. FWIW, my tsconfig.json looks like this:

{ 
  "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" 
  ] 
}

So, the app.component.ts has the template listed as inline html. If I change it from:

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

to

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

Then the ts file gets dutifiully transpiled over to wwwroot in js format, but the html file I created ($project/app/app.component.html ) does not. If I manually copy it there, the test app works as expected.

So, manually copying an html file over to wwwroot whenever I change/add one is not going to work. What is the recommended practice to get this sort of thing automatically scooted over? I already got something in place with my .scss file (which happily generated a compilerconfig.json), so I would imagine there is some mechanism available I can use for .html files.

I also have a gulpfile.js to clean/copy node_modules over to $project/wwwroot/libs, but I am unsure if this would be the right place for copying .html files over, and also unsure about the auto-magic-ness of it. For my node_module stuff, I manually trigger a clean and copy task whenever I need to.

Answer 1

Have a look at tools like gulp or grunt. They are commonly used for such tasks. They have watchers that watch for changes in for example html files and upon change detection perform certain tasks, like copying them to a different folder. Just what you need.

I happen to have a project with .NET Core rc1 and Angular 2 RC4 as well. Here's the excerpt from my gulpfile (which also watches for changes to my SASS files and compiles them when changed):

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"]);