Die beste Methode zum Kopieren von HTML-Dateien nach wwwroot?

Question

Ich beginne meine Reise in Angular 2 (RC4) gehostet auf ASP.Net Core 1.0. Ich habe folgende gewesen von dieser Seite ein Hallo Welt Tutorial, und es hat gut funktioniert so weit:
http://geekswithblogs.net/HumpreyCogay/Default.aspx

Immer, wenn ich Änderungen an der Datei app.component.ts bei $ Projekt/app/app.component gelegen .ts, ich sehe, dass meine Änderungen in der Datei $ project/wwwroot/app/app.component.js widergespiegelt werden. Hurra. Ich verstehe, dass Visual Studio 2015 intelligent genug ist, um zu wissen, dass ich eine Typoskript-Datei geändert habe, weiß, dass sie sie transpilieren muss, und sie auf der Grundlage meines tsconfigs in das www-Verzeichnis ablege. FWIW, sieht mein tsconfig.json wie folgt aus:

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

Also, die app.component.ts die Vorlage als Inline html aufgeführt hat. Wenn ich ändern Sie es aus:

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

zu

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

Dann wird die Datei ts dutifiully transpiled über in js Format wwwroot, aber die HTML-Datei erstellt I ($ Projekt/app/app.component .html) nicht. Wenn ich es dort manuell kopiere, funktioniert die Test-App wie erwartet.

Also manuell kopieren eine HTML-Datei zu wwwroot, wenn ich ändern/hinzufügen, wird nicht funktionieren. Was ist die empfohlene Vorgehensweise, um diese Art von Dingen automatisch überfahren zu lassen? Ich habe bereits etwas mit meiner .scss-Datei (die glücklicherweise eine compilerconfig.json-Datei generiert hat) erstellt, sodass ich mir vorstellen kann, dass es einen Mechanismus gibt, den ich für .html-Dateien verwenden kann.

Ich habe auch eine gulpfile.js, um node_modules zu $ ​​project/wwwroot/libs zu bereinigen, aber ich bin mir nicht sicher, ob dies der richtige Ort für das Kopieren von .html-Dateien wäre und auch unsicher über die automatische Magie-es. Für mein node_module-Zeug triggert ich manuell eine saubere und kopiere Aufgabe, wann immer ich brauche.

Answer 1

Werfen Sie einen Blick auf Tools wie Schluck oder Grunzen. Sie werden häufig für solche Aufgaben verwendet. Sie haben Beobachter, die nach Änderungen in zum Beispiel HTML-Dateien suchen und bei Änderungserkennung bestimmte Aufgaben ausführen, wie das Kopieren in einen anderen Ordner. Genau das, was Sie brauchen.

Ich habe zufällig ein Projekt mit .NET Core rc1 und Angular 2 RC4. Hier ist der Auszug aus meinem gulpfile (was auch für Änderungen an meiner SASS Dateien Uhren und sie kompiliert, wenn geändert):

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