ฉันใช้ npm เพื่อจัดการ jQuery, Bootstrap, Font Awesome และไลบรารีไคลเอนต์ที่คล้ายกันที่ฉันต้องการสำหรับแอปพลิเคชัน ASP.NET Core ของฉัน

วิธีการที่ใช้ได้ผลสำหรับฉันเริ่มต้นด้วยการเพิ่มไฟล์ package.json ลงในโปรเจ็กต์ซึ่งมีลักษณะดังนี้:

{
    "version": "1.0.0",
    "name": "myapp",
    "private": true,
    "devDependencies": {
  },
  "dependencies": {
    "bootstrap": "^3.3.6",
    "font-awesome": "^4.6.1",
    "jquery": "^2.2.3"
  }
}

npm คืนค่าแพ็กเกจเหล่านี้ลงในโฟลเดอร์ node_modules ซึ่งอยู่ในระดับเดียวกับ wwwroot ในไดเร็กทอรีโปรเจ็กต์:

เนื่องจาก ASP.NET Core ให้บริการไฟล์แบบคงที่จากโฟลเดอร์ wwwroot และไม่มี node_modules ฉันจึงต้องทำการเปลี่ยนแปลงสองสามอย่างเพื่อให้ทำงานนี้ได้อันแรกคือการเพิ่ม app.UseFileServer ก่อนแอป UseStaticFiles ใน Startup ของฉัน ไฟล์ cs:

app.UseFileServer(new FileServerOptions()
{
    FileProvider = new PhysicalFileProvider(
        Path.Combine(Directory.GetCurrentDirectory(), @"node_modules")), 
    RequestPath = new PathString("/node_modules"),
    EnableDirectoryBrowsing = true
});

app.UseStaticFiles();

และอันที่สองรวมถึง node_modules ใน PublishOptions ของฉันในไฟล์ project.json:

"publishOptions": {
  "include": [
    "web.config",
    "wwwroot",
    "Views",
    "node_modules"
  ]
},

สิ่งนี้ใช้งานได้ในสภาพแวดล้อมการพัฒนาของฉันและยังใช้งานได้เมื่อฉันปรับใช้กับอินสแตนซ์ Azure App Service ของฉัน jquery, bootstrap และไฟล์คงที่ที่น่ากลัวแบบอักษรจะได้รับการบริการที่ดี แต่ฉันไม่แน่ใจเกี่ยวกับการใช้งานนี้

แนวทางที่เหมาะสมในการทำเช่นนี้คืออะไร?

โซลูชันนี้เกิดขึ้นหลังจากรวบรวมข้อมูลจำนวนมากจากแหล่งข้อมูลหลายแหล่งและลองใช้บางส่วนที่ไม่ได้ผลและดูเหมือนว่าเป็นเรื่องแปลกที่ต้องให้บริการไฟล์เหล่านี้จาก wwwroot ภายนอก

คำแนะนำใด ๆ จะได้รับการชื่นชมอย่างมาก

โดยการเผยแพร่node_modulesโฟลเดอร์ทั้งหมดของคุณคุณกำลังปรับใช้ไฟล์จำนวนมากเกินกว่าที่คุณจะต้องใช้ในการผลิตจริง

ให้ใช้ Task Runner เป็นส่วนหนึ่งของกระบวนการสร้างของคุณเพื่อจัดแพ็คเกจไฟล์ที่คุณต้องการและปรับใช้กับwwwrootโฟลเดอร์ของคุณ นอกจากนี้ยังช่วยให้คุณสามารถเชื่อมต่อและลดขนาดเนื้อหาของคุณได้ในเวลาเดียวกันแทนที่จะต้องให้บริการแต่ละห้องสมุดแยกกัน

จากนั้นคุณสามารถลบการFileServerกำหนดค่าทั้งหมดและพึ่งพาUseStaticFilesแทนได้

ปัจจุบันอึกเป็นตัวเลือกงาน VS เพิ่ม a gulpfile.jsลงในรูทของโปรเจ็กต์ของคุณและกำหนดค่าให้ประมวลผลไฟล์สแตติกของคุณในการเผยแพร่

ตัวอย่างเช่นคุณสามารถเพิ่มscriptsส่วนต่อไปนี้ในproject.json:

 "scripts": {
    "prepublish": [ "npm install", "bower install", "gulp clean", "gulp min" ]
  },

ซึ่งจะทำงานร่วมกับ gulpfile ต่อไปนี้ (ค่าเริ่มต้นเมื่อนั่งร้านด้วยyo):

/// <binding Clean='clean'/>
"use strict";

var gulp = require("gulp"),
    rimraf = require("rimraf"),
    concat = require("gulp-concat"),
    cssmin = require("gulp-cssmin"),
    uglify = require("gulp-uglify");

var webroot = "./wwwroot/";

var paths = {
    js: webroot + "js/**/*.js",
    minJs: webroot + "js/**/*.min.js",
    css: webroot + "css/**/*.css",
    minCss: webroot + "css/**/*.min.css",
    concatJsDest: webroot + "js/site.min.js",
    concatCssDest: webroot + "css/site.min.css"
};

gulp.task("clean:js", function (cb) {
    rimraf(paths.concatJsDest, cb);
});

gulp.task("clean:css", function (cb) {
    rimraf(paths.concatCssDest, cb);
});

gulp.task("clean", ["clean:js", "clean:css"]);

gulp.task("min:js", function () {
    return gulp.src([paths.js, "!" + paths.minJs], { base: "." })
        .pipe(concat(paths.concatJsDest))
        .pipe(uglify())
        .pipe(gulp.dest("."));
});

gulp.task("min:css", function () {
    return gulp.src([paths.css, "!" + paths.minCss])
        .pipe(concat(paths.concatCssDest))
        .pipe(cssmin())
        .pipe(gulp.dest("."));
});

gulp.task("min", ["min:js", "min:css"]);

• การใช้npmสำหรับจัดการไลบรารีฝั่งไคลเอ็นต์เป็นทางเลือกที่ดี (เมื่อเทียบกับ Bower หรือ NuGet) คุณกำลังคิดในทิศทางที่ถูกต้อง :)
• แยกฝั่งเซิร์ฟเวอร์ (ASP.NET Core) และฝั่งไคลเอ็นต์ (เช่น Angular 2, Ember, React) โปรเจ็กต์เป็นโฟลเดอร์แยกกัน (มิฉะนั้นโปรเจ็กต์ ASP.NET ของคุณอาจมีเสียงรบกวนมาก - การทดสอบหน่วยสำหรับโค้ดฝั่งไคลเอ็นต์ node_modules โฟลเดอร์สร้างสิ่งประดิษฐ์ ฯลฯ ) นักพัฒนาส่วนหน้าที่ทำงานในทีมเดียวกันกับคุณจะขอบคุณสำหรับสิ่งนั้น :)
• กู้คืนโมดูล npm ที่ระดับโซลูชัน (เช่นเดียวกับวิธีที่คุณกู้คืนแพ็คเกจผ่าน NuGet - ไม่ใช่ในโฟลเดอร์ของโครงการ) วิธีนี้คุณสามารถมีการทดสอบหน่วยและการรวมในโฟลเดอร์แยกต่างหากได้เช่นกัน (ตรงข้ามกับการทดสอบ JavaScript ฝั่งไคลเอ็นต์ภายในของคุณ โครงการ ASP.NET Core)
• การใช้งานอาจไม่จำเป็นต้องFileServerมีStaticFilesเพียงพอสำหรับการให้บริการไฟล์คงที่ (.js, รูปภาพ ฯลฯ )
• ใช้ Webpack เพื่อรวมโค้ดฝั่งไคลเอ็นต์ของคุณเป็นกลุ่ม (บันเดิล) อย่างน้อยหนึ่งชิ้น
• คุณอาจไม่จำเป็นต้องใช้ Gulp / Gruntหากคุณใช้ชุดรวมโมดูลเช่น Webpack
• เขียนบิลด์อัตโนมัติสคริปต์ใน ES2015 + JavaScript (ตรงข้ามกับ Bash หรือ PowerShell) พวกเขาจะทำงานข้ามแพลตฟอร์มและสามารถเข้าถึงได้มากขึ้นสำหรับนักพัฒนาเว็บที่หลากหลาย (ทุกคนพูด JavaScript ในปัจจุบัน)
• เปลี่ยนชื่อwwwrootเป็นpublicมิฉะนั้นโครงสร้างโฟลเดอร์ใน Azure Web Apps จะสับสน ( D:\Home\site\wwwroot\wwwrootเทียบกับD:\Home\site\wwwroot\public)
• เผยแพร่เฉพาะเอาต์พุตที่คอมไพล์แล้วไปยัง Azure Web Apps (คุณไม่ควรส่งnode_modulesไปยังเว็บโฮสติ้งเซิร์ฟเวอร์) ดูtools/deploy.jsเป็นตัวอย่าง.

เยี่ยมชมASP.NET Core Starter Kitบน GitHub (ข้อจำกัดความรับผิดชอบ: ฉันเป็นผู้เขียน)

ติดตั้งBundler และ Minifierลงใน Visual Studio Extensions

จากนั้นคุณสร้างbundleconfig.jsonและป้อนสิ่งต่อไปนี้:

// Configure bundling and minification for the project.
// More info at https://go.microsoft.com/fwlink/?LinkId=808241
[
 {
    "outputFileName": "wwwroot/js/jquery.min.js",
    "inputFiles": [
      "node_modules/jquery/dist/jquery.js"
    ],
    // Optionally specify minification options
    "minify": {
      "enabled": true,
      "renameLocals": false
    },
    // Optionally generate .map file
    "sourceMap": false
  }
]

ดังนั้นบันเดิลเลอร์และมินิไฟเออร์ (ตามอึก) จึงมีสิทธิ์เข้าถึงไฟล์ต้นฉบับ (ซึ่งควรแยกออกจาก Visual Studio และแยกออกจาก GIT ด้วย) และวางไว้ใน wwwroot ตามที่ระบุ

เฉพาะผลข้างเคียงทุกครั้งที่คุณบันทึกมันจะเรียกใช้สิ่งนี้ (แต่คุณสามารถตั้งค่าให้เรียกใช้ด้วยตนเองได้)

ฉันให้คำตอบคุณสองข้อ npmรวมกับเครื่องมืออื่น ๆ มีประสิทธิภาพ แต่ต้องทำงานในการตั้งค่า หากคุณต้องการดาวน์โหลดไลบรารีบางส่วนคุณอาจต้องการใช้Library Managerแทน (เผยแพร่ใน Visual Studio 15.8)

NPM (ขั้นสูง)

ขั้นแรกให้เพิ่มpackage.jsonในรูทของโปรเจ็กต์ของคุณ เพิ่มเนื้อหาต่อไปนี้:

{
  "version": "1.0.0",
  "name": "asp.net",
  "private": true,
  "devDependencies": {
    "gulp": "3.9.1",
    "del": "3.0.0"
  },
  "dependencies": {
    "jquery": "3.3.1",
    "jquery-validation": "1.17.0",
    "jquery-validation-unobtrusive": "3.2.10",
    "bootstrap": "3.3.7"
  }
}

สิ่งนี้จะทำให้ NPM ดาวน์โหลด Bootstrap, JQuery และไลบรารีอื่น ๆ ที่ใช้ในโปรเจ็กต์หลักของ asp.net ใหม่ไปยังโฟลเดอร์ชื่อ node_modules ขั้นตอนต่อไปคือการคัดลอกไฟล์ไปยังตำแหน่งที่เหมาะสม ในการทำเช่นนี้เราจะใช้ gulp ซึ่งดาวน์โหลดโดย NPM แล้วเพิ่มไฟล์ใหม่ในรากของคุณโครงการชื่อgulpfile.js เพิ่มเนื้อหาต่อไปนี้:

/// <binding AfterBuild='default' Clean='clean' />
/*
This file is the main entry point for defining Gulp tasks and using Gulp plugins.
Click here to learn more. http://go.microsoft.com/fwlink/?LinkId=518007
*/

var gulp = require('gulp');
var del = require('del');

var nodeRoot = './node_modules/';
var targetPath = './wwwroot/lib/';

gulp.task('clean', function () {
    return del([targetPath + '/**/*']);
});

gulp.task('default', function () {
    gulp.src(nodeRoot + "bootstrap/dist/js/*").pipe(gulp.dest(targetPath + "/bootstrap/dist/js"));
    gulp.src(nodeRoot + "bootstrap/dist/css/*").pipe(gulp.dest(targetPath + "/bootstrap/dist/css"));
    gulp.src(nodeRoot + "bootstrap/dist/fonts/*").pipe(gulp.dest(targetPath + "/bootstrap/dist/fonts"));

    gulp.src(nodeRoot + "jquery/dist/jquery.js").pipe(gulp.dest(targetPath + "/jquery/dist"));
    gulp.src(nodeRoot + "jquery/dist/jquery.min.js").pipe(gulp.dest(targetPath + "/jquery/dist"));
    gulp.src(nodeRoot + "jquery/dist/jquery.min.map").pipe(gulp.dest(targetPath + "/jquery/dist"));

    gulp.src(nodeRoot + "jquery-validation/dist/*.js").pipe(gulp.dest(targetPath + "/jquery-validation/dist"));

    gulp.src(nodeRoot + "jquery-validation-unobtrusive/dist/*.js").pipe(gulp.dest(targetPath + "/jquery-validation-unobtrusive"));
});

ไฟล์นี้มีโค้ด JavaScript ที่ดำเนินการเมื่อสร้างและล้างโปรเจ็กต์ มันจะคัดลอกไฟล์ที่จำเป็นทั้งหมดไปยังlib2 ( ไม่ใช่ lib - คุณสามารถเปลี่ยนสิ่งนี้ได้อย่างง่ายดาย ) ฉันใช้โครงสร้างเดียวกันกับในโปรเจ็กต์ใหม่ แต่เปลี่ยนไฟล์ไปยังตำแหน่งอื่นได้ง่าย หากคุณย้ายไฟล์ตรวจสอบให้แน่ใจว่าคุณได้อัปเดต_Layout.cshtmlด้วย โปรดสังเกตว่าไฟล์ทั้งหมดในไดเร็กทอรี lib2 จะถูกลบออกเมื่อโปรเจ็กต์ถูกล้าง

หากคุณคลิกขวาที่gulpfile.jsคุณสามารถเลือกงานวิ่ง Explorer ที่ จากที่นี่คุณสามารถเรียกใช้อึกด้วยตนเองเพื่อคัดลอกหรือล้างไฟล์

Gulp อาจมีประโยชน์สำหรับงานอื่น ๆ เช่น minify JavaScript และ CSS-files:

https://docs.microsoft.com/en-us/aspnet/core/client-side/using-gulp?view=aspnetcore-2.1

ผู้จัดการห้องสมุด (ง่าย)

คลิกขวาที่คุณโครงการและเลือกจัดการลูกค้าด้านห้องสมุด ขณะนี้ไฟล์libman.jsonเปิดอยู่ ในไฟล์นี้คุณระบุว่าจะใช้ไลบรารีและไฟล์ใดและควรจัดเก็บไว้ที่ใดในเครื่อง ง่ายจริงๆ! ไฟล์ต่อไปนี้คัดลอกไลบรารีดีฟอลต์ที่ใช้เมื่อสร้างโปรเจ็กต์ ASP.NET Core 2.1 ใหม่:

{
  "version": "1.0",
  "defaultProvider": "cdnjs",
  "libraries": [
    {
      "library": "jquery@3.3.1",
      "files": [ "jquery.js", "jquery.min.map", "jquery.min.js" ],
      "destination": "wwwroot/lib/jquery/dist/"
    },
    {
      "library": "jquery-validate@1.17.0",
      "files": [ "additional-methods.js", "additional-methods.min.js", "jquery.validate.js", "jquery.validate.min.js" ],
      "destination": "wwwroot/lib/jquery-validation/dist/"
    },
    {
      "library": "jquery-validation-unobtrusive@3.2.10",
      "files": [ "jquery.validate.unobtrusive.js", "jquery.validate.unobtrusive.min.js" ],
      "destination": "wwwroot/lib/jquery-validation-unobtrusive/"
    },
    {
      "library": "twitter-bootstrap@3.3.7",
      "files": [
        "css/bootstrap.css",
        "css/bootstrap.css.map",
        "css/bootstrap.min.css",
        "css/bootstrap.min.css.map",
        "css/bootstrap-theme.css",
        "css/bootstrap-theme.css.map",
        "css/bootstrap-theme.min.css",
        "css/bootstrap-theme.min.css.map",
        "fonts/glyphicons-halflings-regular.eot",
        "fonts/glyphicons-halflings-regular.svg",
        "fonts/glyphicons-halflings-regular.ttf",
        "fonts/glyphicons-halflings-regular.woff",
        "fonts/glyphicons-halflings-regular.woff2",
        "js/bootstrap.js",
        "js/bootstrap.min.js",
        "js/npm.js"
      ],
      "destination": "wwwroot/lib/bootstrap/dist"
    },
    {
      "library": "list.js@1.5.0",
      "files": [ "list.js", "list.min.js" ],
      "destination": "wwwroot/lib/listjs"
    }
  ]
}

หากคุณย้ายไฟล์ตรวจสอบให้แน่ใจว่าคุณได้อัปเดต_Layout.cshtmlด้วย

แทนที่จะพยายามให้บริการโฟลเดอร์โมดูลโหนดคุณยังสามารถใช้ Gulp เพื่อคัดลอกสิ่งที่คุณต้องการไปยัง wwwroot

https://docs.asp.net/en/latest/client-side/using-gulp.html

สิ่งนี้อาจช่วยได้เช่นกัน

Visual Studio 2015 ASP.NET 5 งานอึกไม่คัดลอกไฟล์จาก node_modules

แนวทางที่เหมาะสมในการทำเช่นนี้คืออะไร?

มีหลายวิธีที่ "ถูกต้อง" เพียงแค่คุณตัดสินใจเลือกห้องชุดที่ดีที่สุดที่คุณต้องการ ดูเหมือนว่าคุณเข้าใจผิดวิธีใช้node_modules...

หากคุณคุ้นเคยกับNuGetคุณควรคิดว่าnpmเป็นคู่สัญญาฝั่งไคลเอ็นต์ ในกรณีที่node_modulesไดเรกทอรีเป็นเหมือนbinไดเรกทอรีสำหรับNuGet แนวคิดก็คือไดเร็กทอรีนี้เป็นเพียงตำแหน่งทั่วไปสำหรับจัดเก็บแพ็คเกจในความคิดของฉันควรdependencyเลือกแพ็คเกจที่คุณต้องการเหมือนที่คุณทำในไฟล์package.json. จากนั้นใช้ Task Runner Gulpเช่นเพื่อคัดลอกไฟล์ที่คุณต้องการไปยังwwwrootตำแหน่งที่คุณต้องการ

ฉันเขียนบล็อกโพสต์เกี่ยวกับเรื่องนี้ในเดือนมกราคมซึ่งมีรายละเอียดnpm , Gulpและรายละเอียดอื่น ๆ ทั้งหมดที่ยังคงเกี่ยวข้องในปัจจุบัน นอกจากนี้มีคนเรียกร้องความสนใจให้กับคำถาม SO ของฉันที่ฉันถามและในที่สุดก็ตอบตัวเองที่นี่ซึ่งอาจเป็นประโยชน์

ฉันสร้างGistที่แสดงgulpfile.jsเป็นตัวอย่าง

ในของคุณStartup.csการใช้ไฟล์คงที่เป็นสิ่งสำคัญ:

app.UseStaticFiles();

เพื่อให้แน่ใจว่าแอปพลิเคชันของคุณสามารถเข้าถึงสิ่งที่ต้องการได้

วิธีที่ง่ายมากคือการใช้OdeToCode.UseNodeModulesแพคเกจ Nuget ฉันเพิ่งทดสอบกับ. Net Core 3.0 สิ่งที่คุณต้องทำคือเพิ่มแพ็กเกจลงในโซลูชันและอ้างอิงในวิธีกำหนดค่าของคลาสเริ่มต้น:

app.UseNodeModules();

ฉันได้เรียนรู้เกี่ยวกับเรื่องนี้จากการสร้างเว็บแอปที่ยอดเยี่ยมด้วย ASP.NET Core, MVC, Entity Framework Core, Bootstrap และ Angular Pluralsight โดย Shawn Wildermuth

Shawn Wildermuth มีคำแนะนำที่ดีที่นี่: https://wildermuth.com/2017/11/19/ASP-NET-Core-2-0-and-the-End-of-Bower

บทความนี้เชื่อมโยงไปยัง gulpfile บน GitHub ซึ่งเขาใช้กลยุทธ์ในบทความ คุณสามารถคัดลอกและวางเนื้อหา gulpfile ส่วนใหญ่ลงในของคุณได้ แต่อย่าลืมเพิ่มแพ็คเกจที่เหมาะสมใน package.json ภายใต้ devDependencies: gulp gulp-uglify gulp-concat rimraf merge-stream

ฉันพบวิธีที่ดีกว่าในการจัดการแพ็คเกจ JS ในโครงการของฉันด้วยนักวิ่งงาน NPM Gulp / Grunt ฉันไม่ชอบความคิดที่จะมี NPM ที่มีไลบรารี javascript อีกชั้นเพื่อจัดการกับ "ระบบอัตโนมัติ" และข้อกำหนดอันดับหนึ่งของฉันคือการรันการอัปเดต npm อย่างง่ายโดยไม่ต้องกังวลว่าฉันจะต้องเรียกใช้งานอึกหรือเปล่า หากคัดลอกทุกอย่างสำเร็จและในทางกลับกัน

วิธี NPM:

• ตัวย่อ JS นั้นรวมอยู่ในแกน ASP.net แล้วให้มองหา bundleconfig.json ดังนั้นนี่ไม่ใช่ปัญหาสำหรับฉัน (ไม่ได้รวบรวมสิ่งที่กำหนดเอง)
• สิ่งที่ดีเกี่ยวกับ NPM คือมีโครงสร้างไฟล์ที่ดีดังนั้นฉันจึงสามารถค้นหาการอ้างอิงเวอร์ชันที่คอมไพล์ล่วงหน้า / ย่อขนาดได้ตลอดเวลาภายใต้ node_modules / module / dist
• ฉันใช้สคริปต์ NPM node_modules / .hooks / {eventname} ซึ่งจัดการคัดลอก / อัปเดต / ลบไฟล์ Project / wwwroot / lib / module / dist / .js คุณสามารถดูเอกสารได้ที่นี่https: // docs.npmjs.com/misc/scripts (ฉันจะอัปเดตสคริปต์ที่ฉันใช้เพื่อคอมไพล์เมื่อมันจะได้รับการขัดเกลามากขึ้น) ฉันไม่ต้องการนักวิ่งงานเพิ่มเติม (เครื่องมือ .js ที่ฉันไม่ชอบ) สิ่งที่ทำให้โครงการของฉันสะอาดและเรียบง่าย

วิธีหลาม:

https://pypi.python.org/pyp ... แต่ในกรณีนี้คุณต้องดูแลแหล่งข้อมูลด้วยตนเอง

ขอแก้ตัวยาว ๆ ของกระทู้นี้

นี่คือตัวอย่างการทำงานโดยใช้ ASP.NET Core เวอร์ชัน 2.5

บางสิ่งบางอย่างที่ทราบก็คือว่าproject.jsonเป็นล้าสมัย ( ดูที่นี่ ) ในความโปรดปรานของ.csproj มีปัญหากับ.csproj ไฟล์เป็นคุณสมบัติจำนวนมากและไม่มีตำแหน่งศูนย์กลางสำหรับเอกสารประกอบ ( ดูที่นี่ )

อีกอย่างหนึ่งตัวอย่างนี้กำลังเรียกใช้ ASP.NET core ในคอนเทนเนอร์ Docker Linux (alpine 3.9) ดังนั้นเส้นทางจะสะท้อนถึงสิ่งนั้น นอกจากนี้ยังใช้ gulp ^ 4.0 อย่างไรก็ตามด้วยการปรับเปลี่ยนบางอย่างควรใช้งานได้กับ ASP.NET Core, Gulp, NodeJS เวอร์ชันเก่าและไม่มี Docker

แต่นี่คือคำตอบ:

gulpfile.js ดูตัวอย่างการทำงานจริงที่นี่

// ROOT and OUT_DIR are defined in the file above. The OUT_DIR value comes from .NET Core when ASP.net us built.
const paths = {
    styles: {
        src: `${ROOT}/scss/**/*.scss`,
        dest: `${OUT_DIR}/css`
    },
    bootstrap: {
        src: [
            `${ROOT}/node_modules/bootstrap/dist/css/bootstrap.min.css`,
            `${ROOT}/node_modules/startbootstrap-creative/css/creative.min.css`
        ],
        dest: `${OUT_DIR}/css`
    },
    fonts: {// enter correct paths for font-awsome here.
        src: [
            `${ROOT}/node_modules/fontawesome/...`,
        ],
        dest: `${OUT_DIR}/fonts`
    },
    js: {
        src: `${ROOT}/js/**/*.js`,
        dest: `${OUT_DIR}/js`
    },
    vendorJs: {
        src: [
            `${ROOT}/node_modules/jquery/dist/jquery.min.js`
            `${ROOT}/node_modules/bootstrap/dist/js/bootstrap.min.js`
        ],
        dest: `${OUT_DIR}/js`
    }
};

// Copy files from node_modules folder to the OUT_DIR.
let fonts = () => {
    return gulp
        .src(paths.styles.src)
        .pipe(gulp.dest(paths.styles.dest));
};

// This compiles all the vendor JS files into one, jsut remove the concat to keep them seperate.
let vendorJs = () => {
    return gulp
        .src(paths.vendorJs.src)
        .pipe(concat('vendor.js'))
        .pipe(gulp.dest(paths.vendorJs.dest));
}

// Build vendorJs before my other files, then build all other files in parallel to save time.
let build = gulp.series(vendorJs, gulp.parallel(js, styles, bootstrap));

module.exports = {// Only add what we intend to use externally.
    default: build,
    watch
};

เพิ่มTargetในไฟล์. csproj โปรดสังเกตว่าเราได้เพิ่มWatchเพื่อดูและยกเว้นหากเราใช้ประโยชน์จากdotnet run watchคำสั่ง

app.csprod

  <ItemGroup>
    <Watch Include="gulpfile.js;js/**/*.js;scss/**/*.scss" Exclude="node_modules/**/*;bin/**/*;obj/**/*" />
  </ItemGroup>

  <Target Name="BuildFrontend" BeforeTargets="Build">
    <Exec Command="yarn install" />
    <Exec Command="yarn run build -o $(OutputPath)" />
  </Target>

ตอนนี้เมื่อdotnet run buildเรียกใช้มันจะติดตั้งและสร้างโมดูลโหนด