วิธีที่ดีที่สุดในการคัดลอกไฟล์ HTML ไปยัง wwwroot?

ฉันกำลังเริ่มต้นการเดินทางสู่ Angular 2 (RC4) ที่โฮสต์บน ASP.Net Core 1.0 ฉันได้ติดตามบทช่วยสอนสวัสดีชาวโลกจากไซต์นี้ และจนถึงตอนนี้ก็ใช้ได้ดี:
http://geekswithblogs.net/HumpreyCogay/Default.aspx

เมื่อใดก็ตามที่ฉันทำการเปลี่ยนแปลงในไฟล์ app.component.ts ซึ่งอยู่ที่ $project/app/app.component.ts ฉันเห็นว่าการเปลี่ยนแปลงของฉันสะท้อนให้เห็นในไฟล์ $project/wwwroot/app/app.component.js ไชโย ฉันเข้าใจว่า Visual Studio 2015 นั้นฉลาดพอที่จะรู้ว่าฉันแก้ไขไฟล์ typescript รู้ว่ามันต้อง transpile และทิ้งมันลงใน wwwroot ตาม tsconfig ของฉัน 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>'

to

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

จากนั้นไฟล์ ts จะถูกถ่ายโอนไปยัง wwwroot ในรูปแบบ js แต่ไฟล์ html ที่ฉันสร้าง ($project/app/app.component.html ) ไม่ได้ทำ หากฉันคัดลอกมันด้วยตนเอง แอปทดสอบจะทำงานตามที่คาดไว้

ดังนั้นการคัดลอกไฟล์ html ไปยัง wwwroot ด้วยตนเองทุกครั้งที่ฉันเปลี่ยน/เพิ่มไฟล์จะไม่ทำงาน แนวทางปฏิบัติที่แนะนำในการทำให้สิ่งนี้ถูกเลื่อนออกไปโดยอัตโนมัติคืออะไร? ฉันมีบางอย่างเข้าที่กับไฟล์ .scss ของฉันแล้ว (ซึ่งสร้างคอมไพเลอร์config.json อย่างมีความสุข) ดังนั้นฉันคิดว่ามีกลไกบางอย่างที่ฉันสามารถใช้กับไฟล์ .html ได้

ฉันยังมี gulpfile.js เพื่อล้าง/คัดลอก node_modules ไปยัง $project/wwwroot/libs แต่ฉันไม่แน่ใจว่านี่จะเป็นสถานที่ที่เหมาะสมสำหรับการคัดลอกไฟล์ .html หรือไม่ และยังไม่แน่ใจเกี่ยวกับความมหัศจรรย์อัตโนมัติของ มัน. สำหรับข้อมูล node_module ของฉัน ฉันจะทริกเกอร์งานล้างข้อมูลและคัดลอกด้วยตนเองทุกครั้งที่ต้องการ


angular asp.net-core
person Bill Sambrone    schedule 08.07.2016    source แหล่งที่มา
comment
ทำไมคุณต้องวางไว้ใต้ wwwroot ถ้าทุกวันนี้รูทของแอปเป็นพาเรนต์ของ wwwroot   -  person Pawel    schedule 08.07.2016
comment
ฉันมีแอปภายใต้ wwwroot ซึ่งฉันปฏิบัติเหมือน 'dist' ของฉัน (เฉพาะจาวาสคริปต์ในที่นี่ + เทมเพลต) ในระดับเพียร์ถึง wwwroot ฉันมีแอปอื่นที่ฉันทำการพัฒนาจริง จากนั้นคอมไพเลอร์ VS typescript จะแยกไฟล์ js ออกมาอย่างน่าอัศจรรย์และคัดลอกไปยังแอปที่อยู่ใน wwwroot   -  person Bill Sambrone    schedule 08.07.2016

คำตอบ (1)


arrow_upward
6
arrow_downward

ดูเครื่องมือต่างๆ เช่น อึกหรือฮึดฮัด มักใช้สำหรับงานดังกล่าว พวกเขามีผู้เฝ้าดูการเปลี่ยนแปลงในไฟล์เช่น 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"]);
person hholtij    schedule 08.07.2016
comment
อึกเลยแล้วกัน ฉันรู้สึกเหมือนฉันต้องการบางสิ่งที่แตกต่างออกไปเพราะฉันแค่คัดลอก node_modules ด้วยการอึก ฉันจะลองดูเมื่อฉันกลับถึงบ้านจากที่ทำงานและอัปเดตรายการ SO นี้ - person Bill Sambrone; 08.07.2016
comment
คุณช่วยขยายแนวทางปฏิบัติที่ดีที่สุดด้วยการใช้ Gulp ในบริบท ASP Core + Angular2 ได้ไหม การจับคู่นี้ดูค่อนข้างใหม่ ดังนั้นจึงไม่ค่อยมีแนวทางปฏิบัติที่ดีที่สุดบน Google มากนัก (ถ้ามี) ในตอนนี้ - person Bill Sambrone; 08.07.2016
comment
ฉันเพิ่มส่วนที่เกี่ยวข้องของ gulpfile ลงในคำตอบเพื่อให้อ่านง่ายขึ้น - person hholtij; 09.07.2016