ASP.NET कोर के साथ npm का उपयोग कैसे करें

Question

मैं jpm, बूटस्ट्रैप, फ़ॉन्ट विस्मयकारी और इसी तरह के क्लाइंट पुस्तकालयों को प्रबंधित करने के लिए npm का उपयोग कर रहा हूं जिन्हें मुझे अपने ASP.NET कोर एप्लिकेशन की आवश्यकता है।

मेरे लिए काम करने वाले दृष्टिकोण ने पैकेज.जॉन फ़ाइल को प्रोजेक्ट में जोड़कर शुरू किया, जो इस तरह दिखता है:

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

npm इन पैकेजों को नोड_मॉडल फ़ोल्डर में पुनर्स्थापित करता है जो प्रोजेक्ट निर्देशिका में wwwroot के समान स्तर पर है:

जैसा कि ASP.NET Core wwwroot फ़ोल्डर से स्थिर फ़ाइलों की सेवा करता है, और नोड_मॉड्यूल्स नहीं है, मुझे यह काम करने के लिए कुछ बदलाव करने थे, पहला: app.UseFileServer को ऐप से पहले जोड़ना। मेरे स्टार्टअप मेंUseStaticFiles। सीएस फ़ाइल:

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

app.UseStaticFiles();

और दूसरा एक, जिसमें Project_json फ़ाइल में मेरे प्रकाशनों में नोड_मॉडल शामिल हैं:

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

यह मेरे विकास के माहौल में काम करता है और यह तब भी काम करता है जब मैं इसे अपने एज़्योर ऐप सर्विस उदाहरण में तैनात करता हूं, जक्वेरी, बूटस्ट्रैप और फॉन्ट-स्टैटिक स्टैटिक फाइलें अच्छी तरह से परोसी जाती हैं, लेकिन मैं इस कार्यान्वयन के बारे में सुनिश्चित नहीं हूं।

ऐसा करने के लिए सही तरीका क्या है?

यह समाधान कई स्रोतों से जानकारी के बहुत सारे बिट एकत्र करने और कुछ काम नहीं करने की कोशिश करने के बाद आया, और wwwroot के बाहर से इन फ़ाइलों की सेवा करने में थोड़ा अजीब लगता है।

किसी भी सलाह की काफी सराहना की जाएगी।

Comments

उपयोगी लिंक हो सकता है: blog.nbellocam.me/2016/03/14/asp-net-core-and-angular-2

— adem caglin

इस लिंक पर एक काम उदाहरण है ASP.NET कोर w / NPM : ievangelistblog.wordpress.com/2016/01/13/...

— डेविड पाइन

एक चीज़ जो मेरे लिए उपयोग की जाती है Bundler and Minifier- वह है स्रोत को निर्दिष्ट करें wwwroot के बाहर और जब आप इसे बनाते हैं तो JS को wwwroot में बनाता है। यह उचित तरीका है .. आपको नोड_मॉड्यूल्स से सामग्री नहीं परोसनी चाहिए

— पिओट्र कुला

मैं अत्यधिक किसी को भी node_modulesफ़ोल्डर की सेवा करने से हतोत्साहित करता हूँ । क) यह नहीं है कि कैसे इको-सिस्टम को डिज़ाइन किया गया है b) यह एक सुरक्षा जोखिम है, आपके एक स्थापित पैकेज से संवेदनशील जानकारी लीक हो सकती है। उचित तरीका यह है कि एक बिल्डिंग पाइपलाइन (ग्रन्ट / gulp / नोड / वेबपैक) स्थापित किया जाए जो स्थिर फ्रंट-एंड फ़ाइलों को सेवा के लिए समर्पित एक फ़ोल्डर srcया फाइलों को प्रकाशित करता हैwhatever

— CervEd

Answer 1

अपने पूरे node_modulesफ़ोल्डर को प्रकाशित करके आप वास्तव में उत्पादन में आवश्यकता से कहीं अधिक फाइलें तैनात कर रहे हैं।

इसके बजाय, अपनी निर्माण प्रक्रिया के हिस्से के रूप में एक कार्य धावक का उपयोग करें उन फ़ाइलों को पैकेज करने के लिए जिनकी आपको आवश्यकता है, और उन्हें अपने wwwrootफ़ोल्डर में तैनात करें । यह आपको अलग-अलग प्रत्येक पुस्तकालय की सेवा करने के बजाय एक ही समय में अपनी संपत्ति को समाप्‍त और छोटा करने की अनुमति देगा।

फिर आप FileServerकॉन्फ़िगरेशन को पूरी तरह से हटा सकते हैं और UseStaticFilesइसके बजाय भरोसा कर सकते हैं।

वर्तमान में, गुलशन पसंद का वीएस टास्क रनर है। gulpfile.jsअपनी परियोजना की जड़ में एक जोड़ें , और प्रकाशित करने के लिए अपनी स्थिर फ़ाइलों को संसाधित करने के लिए इसे कॉन्फ़िगर करें।

उदाहरण के लिए, आप निम्न scriptsअनुभाग को अपने में जोड़ सकते हैं project.json:

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

जो निम्नलिखित गुलफ़िले के साथ काम करेगा (जब मचान के साथ डिफ़ॉल्ट 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"]);

Comments

मैं थोड़ा उलझन में हूं कि यह सवाल का जवाब कैसे है। यह लगभग वैसा ही है जैसा कि माइक्रोसॉफ्ट के पास यहां के गुल्प को कॉन्फ़िगर करने के लिए है ( docs.microsoft.com/en-us/aspnet/core/client-side/use-gulp )। हालाँकि जहाँ तक मैं यह बता सकता हूँ कि यह मेरे nad_modules निर्देशिका से सामग्री नहीं लेता है और इसे 'lib' में जोड़ता है या इसे मेरी किसी भी फाइल में प्रयोग करने योग्य बनाता है ... मैं इसे बहुत नया हूँ इसलिए अविश्वसनीय रूप से अविश्वसनीय रूप से भ्रमित हूँ वेब विकास की जटिल नई दुनिया ...

— गेरार्ड विल्किंसन

ठीक हो गया। मैं फ्रंट-एंड को पूरी तरह छोड़ने के लिए तैयार हूं और बस एपीआई पर काम कर रहा हूं।

— ल्यूक पुप्लेट ने

यह सामान्य रूप से सही दृष्टिकोण है, लेकिन उत्तर एक महत्वपूर्ण चरण को छोड़ देता है: नोड_मॉड्यूल्स फ़ोल्डर से wwwroot फ़ोल्डर में फ़ाइलों को एक गुल कार्य के रूप में कॉपी करना। Var नोडरूट = './ode_modules/' से शुरू करें; और एक ऐसा कार्य जोड़ें, जो नोडरूट से वांछित सबफ़ोल्डर को वेबरोट के उपयुक्त सबफ़ोल्डर में कॉपी करता है। अब विस्तृत करने के लिए समय नहीं है, लेकिन यदि रुचि है, तो मैं बाद में विवरण जोड़ सकता हूं।

— 17

किसी ने स्पष्ट क्यों नहीं उठाया: "हमें यह प्रश्न क्यों पूछना है!" हम जानबूझकर फ़ाइलों को उस स्थान पर क्यों स्थापित करते हैं जहाँ उनका उपयोग नहीं किया जा सकता है? फिर, क्योंकि हमारी फाइलें सुलभ नहीं हैं, हम उन्हें उस स्थान पर कॉपी करने के लिए एक विस्तृत उपयोगिता स्थापित और कॉन्फ़िगर करते हैं जहां उनका उपयोग किया जा सकता है। यह वास्तव में हास्यास्पद है।

— सैम

क्योंकि यहाँ टूलींग बकवास है, मूल रूप से। Npm का उपयोग करना बस npm का उपयोग करना है, जैसे आप कुछ भी करेंगे । ASP.NET Core के लिए कुछ खास नहीं है। सब कुछ इस node_modulesकारण से हो जाता है कि npm क्या करता है। चीजों को सही जगह पर ले जाने के लिए गल्प टास्क जरूरी है, यानी जहां आपको वास्तव में उनकी जरूरत है। मुझे लगता है कि समस्या यह है कि माइक्रोसॉफ्ट ने बोवर के साथ इस तरह का एक सुंदर एकीकरण प्रदान किया, लेकिन अब बोवर मर चुका है (या कम से कम मर रहा है) और माइक्रोसॉफ्ट ने कोई वैकल्पिक टूलिंग प्रदान नहीं किया है।

— क्रिस प्रैट

Answer 2

• npmक्लाइंट-साइड पुस्तकालयों के प्रबंधन के लिए उपयोग करना एक अच्छा विकल्प है (जैसा कि बोवर या नुगेट के विपरीत), आप सही दिशा में सोच रहे हैं :)
• स्प्लिट सर्वर-साइड (ASP.NET Core) और क्लाइंट-साइड (जैसे Angular 2, Ember, React) प्रोजेक्ट अलग-अलग फ़ोल्डरों में (अन्यथा आपके ASP.NET प्रोजेक्ट में बहुत शोर हो सकता है - क्लाइंट-साइड कोड, नोड_मॉड्यूल्स के लिए यूनिट टेस्ट फ़ोल्डर, निर्माण कलाकृतियों आदि)। आपके साथ एक ही टीम में काम करने वाले फ्रंट-एंड डेवलपर्स आपको धन्यवाद देंगे :)
• समाधान स्तर पर npm मॉड्यूल को पुनर्स्थापित करें (इसी तरह आप NuGet के माध्यम से पैकेज को कैसे पुनर्स्थापित करते हैं - प्रोजेक्ट के फ़ोल्डर में नहीं), इस तरह से आप एक अलग फ़ोल्डर में यूनिट और एकीकरण परीक्षण कर सकते हैं (साथ ही क्लाइंट-साइड जावास्क्रिप्ट टेस्ट आपके अंदर होने का विरोध करते हैं। ASP.NET कोर परियोजना)।
• उपयोग की आवश्यकता नहीं हो सकती है FileServer, StaticFilesस्थिर फ़ाइलों (.js, छवियों आदि) की सेवा के लिए पर्याप्त होना चाहिए
• अपने क्लाइंट-साइड कोड को एक या अधिक विखंडू (बंडल) में बंडल करने के लिए वेबपैक का उपयोग करें
• यदि आप वेबपैक जैसे मॉड्यूल बंडल का उपयोग कर रहे हैं, तो आपको गुलप / ग्रंट की आवश्यकता नहीं हो सकती है
• ES2015 + जावास्क्रिप्ट में स्वचालित स्वचालन स्क्रिप्ट लिखें (बैश या पॉवरशेल के विपरीत), वे क्रॉस-प्लेटफ़ॉर्म पर काम करेंगे और विभिन्न वेब डेवलपर्स के लिए अधिक सुलभ होंगे (हर कोई आजकल जावास्क्रिप्ट बोलता है)
• नाम बदलें wwwrootकरने के लिए public, नहीं तो Azure वेब Apps में फ़ोल्डर संरचना (भ्रमित हो जाएगा D:\Home\site\wwwroot\wwwrootबनाम D:\Home\site\wwwroot\public)
• Azure Web Apps में केवल संकलित आउटपुट प्रकाशित करें (आपको node_modulesवेब होस्टिंग सर्वर पर कभी धक्का नहीं देना चाहिए )। tools/deploy.jsएक उदाहरण के रूप में देखें ।

GitHub पर ASP.NET कोर स्टार्टर किट पर जाएं (अस्वीकरण: मैं लेखक हूं)

Comments

अच्छा जवाब, एक स्टार्टर किट के साथ समुदाय प्रदान करने पर आपके काम के लिए यश!

— डेविड पाइन

मैंने इस साल के शुरू में एक प्रमुख यूके ब्रांड के लिए एक विशाल सार्वजनिक कोणीय ऐप का सफलतापूर्वक निर्माण किया था, और फिर भी मैं इस उत्तर को समझ नहीं पाया। मैं इसे अपनी जगह के रूप में सीखना शुरू नहीं कर सकता। वस्तुतः करियर संकट है।

— ल्यूक पुप्लेट

यह क्लाइंट साइड स्क्रिप्ट और फ़ाइलों को लिखने और प्रबंधित करने के दौरान Do's और Dont का अच्छा सारांश नहीं है। अपना समय और शोध बचाया। आप के लिए यश!

— संगीता

दुर्भाग्य से, विजुअल स्टूडियो (बेवकूफी से IMHO) "wwwroot" निर्देशिका को विशेष रूप से अपने नाम के आधार पर मानता है, यह समाधान एक्सप्लोरर में एक विशेष "वेब रूट" आइकन देता है और इसकी सामग्री को "सामग्री" के बजाय डिफ़ॉल्ट रूप से "कोई नहीं" के रूप में चिह्नित करता है। । यदि इरादा स्टैटिकली सर्व की गई फ़ाइलों को वहां रखना है, और आप विजुअल स्टूडियो का उपयोग कर रहे हैं, तो आपको संभवतः "wwwroot" नाम छोड़ देना चाहिए। मैं मानता हूँ कि यह एक बुरा नाम है।

— Jez

Answer 3

Visual Studio एक्सटेंशन में Bundler और Minifier स्थापित करें

फिर आप एक बनाएँ 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
  }
]

इसलिए बंडलर और मिनिफ़ेर (गल्प आधारित) की स्रोत फ़ाइलों तक पहुँच होती है (जिसे विज़ुअल स्टूडियो से बाहर रखा जाना चाहिए और जीआईटी से भी बाहर रखा जाना चाहिए) और उन्हें निर्दिष्ट रूप से wwwroot में डाल दिया है।

इसे सहेजने पर हर बार केवल साइड इफ़ेक्ट ही चलेगा (लेकिन आप इसे मैन्युअल रूप से चलाने के लिए सेट कर सकते हैं)

Comments

देखने के बाद बोवर मर चुका है और मैं अब बूटस्ट्रैप को एनपीएम पर स्विच किए बिना अपडेट नहीं कर सकता, यह मेरा पसंदीदा तरीका प्रतीत होता है। इस सरल समाधान की तुलना में गुलप या वेबपैक ओवरकिल लगता है जो पहले से ही नवीनतम एमवीसी प्रोजेक्ट टेम्प्लेट में है। साझा करने के लिए धन्यवाद!

— मैट सैंडर्स

कैसे सीएसएस में संदर्भित चित्रों को यहां संभाला जाएगा? मैं अभी भी नोड_मॉडल फ़ोल्डर में छवियों के साथ एक समस्या का सामना कर रहा हूं जहां सीएसएस और जेएस को www में स्थानांतरित किया गया था। इसे ठीक करने के लिए कोई भी विचार ?

— VPP

क्या यह आईडीई-अज्ञेयवादी है? यदि आपकी टीम में से कुछ वीएस कोड का उपयोग कर रहे हैं और यह सीडी निर्माण पाइपलाइन में कैसे खेलता है तो यह कैसे काम करेगा?

— जैकब स्टैम

जब आप बुंडलर और मिनिफ़र नुगेट पैकेज स्थापित करते हैं, तो डॉक्स का कहना है कि यह उन बिल्ड लक्ष्यों को इंजेक्ट करता है जो बिल्ड और क्लीन टाइम पर चलते हैं। मुझे लगता है कि एक बार जगह में होने के बावजूद, यह ठीक काम करेगा, भले ही आईडीई का उपयोग किया जाए, सही है? और देखें: docs.microsoft.com/en-gb/aspnet/core/client-side/…

— Ciaran Gallagher

विकास पर्यावरण के बाहर इन लिपियों को निर्दिष्ट करने के लिए बंडल केवल उपयोगी है। मेरे _Layout पृष्ठ से मुझे अभी भी जेएस और सीएसएस फ़ाइलों को मैन्युअल रूप से संदर्भित करने की आवश्यकता है, लेकिन नोड_मॉडल फ़ोल्डर वेबसाइट के बाहर है ... इसलिए मुझे नहीं लगता कि यह समस्या को ठीक से संबोधित करता है, फिर भी आपको कॉपी करने के लिए एक गुल स्क्रिप्ट की आवश्यकता है। मेरे wwwroot फ़ोल्डर में आवश्यक फाइलों पर।

— सियारन गलाघेर

Answer 4

मैं आपको दो उत्तर देता हूं। npm अन्य उपकरणों के साथ संयुक्त शक्तिशाली है, लेकिन सेटअप करने के लिए कुछ काम की आवश्यकता है। यदि आप बस कुछ लाइब्रेरी डाउनलोड करना चाहते हैं, तो आप इसके बजाय लाइब्रेरी मैनेजर का उपयोग करना चाह सकते हैं (विजुअल स्टूडियो 15.8 में जारी)।

एनपीएम (उन्नत)

सबसे पहले आप के प्रोजेक्ट के मूल में 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 को बूटस्ट्रैप, JQuery और अन्य पुस्तकालयों को डाउनलोड करेगा जो एक नए asp.net कोर प्रोजेक्ट में नोड_मॉड्यूल्स नामक फ़ोल्डर में उपयोग किया जाता है। अगला कदम फाइलों को एक उपयुक्त स्थान पर कॉपी करना है। ऐसा करने के लिए हम 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"));
});

इस फ़ाइल में एक जावास्क्रिप्ट कोड होता है जिसे परियोजना के निर्माण और साफ होने पर निष्पादित किया जाता है। यह सभी आवश्यक फाइलों को lib2 में कॉपी करेगा ( lib नहीं - आप इसे आसानी से बदल सकते हैं )। मैंने एक नए प्रोजेक्ट के समान संरचना का उपयोग किया है, लेकिन फ़ाइलों को किसी भिन्न स्थान पर बदलना आसान है। यदि आप फ़ाइलें स्थानांतरित करते हैं, तो सुनिश्चित करें कि आप _Layout.cshtml को भी अपडेट करते हैं । ध्यान दें कि जब प्रोजेक्ट को साफ किया जाता है तो lib2- डायरेक्टरी की सभी फाइलें हटा दी जाएंगी।

यदि आप gulpfile.js पर राइट क्लिक करते हैं , तो आप टास्क रनर एक्सप्लोरर का चयन कर सकते हैं । यहाँ से आप फ़ाइलों को कॉपी या साफ़ करने के लिए मैन्युअल रूप से gulp चला सकते हैं।

जावास्क्रिप्ट और सीएसएस-फाइलों को छोटा करने जैसे अन्य कार्यों के लिए भी गुल उपयोगी हो सकता है:

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 को भी अपडेट करते हैं ।

Comments

पुस्तकालय प्रबंधक - इसके बारे में कभी नहीं सुना, लेकिन वास्तव में मुझे क्या चाहिए! यह सही उत्तर होना चाहिए।

— कोडमोंकी

एक घूंट त्रुटि मैं फ़ाइल में डिफ़ॉल्ट कार्य की पहली पंक्ति बदलना पड़ा से बचने के लिए gulpfile.jsकरने के लिए gulp.task('default', function (done) {और फिर उस समारोह में निम्नलिखित एक अंतिम पंक्ति के रूप में जोड़ें: done();अन्यथा मैं त्रुटि संदेश मिलता हैThe following tasks did not complete: Did you forget to signal async completion?

— मैनफ्रेड

Answer 5

नोड मॉड्यूल फ़ोल्डर की सेवा करने की कोशिश करने के बजाय, आप wwwroot को जो कुछ भी चाहिए, उसे कॉपी करने के लिए भी गुल का उपयोग कर सकते हैं।

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

यह भी मदद कर सकता है

Visual Studio 2015 ASP.NET 5, नोड कार्य नोड_मॉड्यूल्स से फ़ाइलों की प्रतिलिपि नहीं बना रहा है

Comments

मुझे वास्तव में दूसरी कड़ी पसंद है, किसी भी तरह परिचित है। ;)

— डेविड पाइन

जब आप ASP.NET कोर वेब ऐप स्रोत फ़ाइलों को npm मॉड्यूल और क्लाइंट-साइड कोड बिल्ड आउटपुट के साथ मिलाते हैं, तो यह बहुत सुविधाजनक नहीं है। यही कारण है कि ASP.NET टीम डिफ़ॉल्ट ASP.NET MVC प्रोजेक्ट टेम्प्लेट से Gulp, package.json को हटा रही है।

— कोनस्टेंटिन टर्कस

मैं नहीं जानता था कि। जब मैं मार्च में वीएस लाइव में था, वे इसके बारे में थे, लेकिन तब से यह बहुत बदल गया है।

— डेव_750

Answer 6

ऐसा करने के लिए सही तरीका क्या है?

बहुत सारे "सही" दृष्टिकोण हैं, आपने अभी तय किया है कि आपकी आवश्यकताओं में से कौन सा सबसे अच्छा है। ऐसा प्रतीत होता है जैसे आप गलत समझ रहे हैं कि कैसे उपयोग करें node_modules...

यदि आप NuGet से परिचित हैं, तो आपको npm को इसके क्लाइंट-साइड समकक्ष के रूप में सोचना चाहिए । जहां node_modulesनिर्देशिका NuGet केbin लिए निर्देशिका की तरह है । विचार यह है कि यह निर्देशिका संकुल को संग्रहीत करने के लिए सिर्फ एक सामान्य स्थान है, मेरी राय में उन पैकेजों को लेना बेहतर है जो आपको चाहिए थे । फिर उदाहरण के लिए एक टास्क रनर का उपयोग करें, जो आपके इच्छित स्थान पर आवश्यक फ़ाइलों को कॉपी करने के लिए है ।dependencypackage.jsonGulpwwwroot

मैंने जनवरी में इस बैक के बारे में एक ब्लॉग पोस्ट लिखा था जिसमें npm , Gulp और अन्य विवरणों का एक पूरा गुच्छा था जो आज भी प्रासंगिक हैं। इसके अतिरिक्त, किसी ने मेरे एसओ प्रश्न पर ध्यान दिया जिसे मैंने पूछा और अंततः खुद को यहां उत्तर दिया , जो संभवतः सहायक है।

मैंने एक उदाहरण Gistके gulpfile.jsरूप में एक शो बनाया ।

आपके Startup.csलिए स्थिर फ़ाइलों का उपयोग करना अभी भी महत्वपूर्ण है:

app.UseStaticFiles();

यह सुनिश्चित करेगा कि आपका एप्लिकेशन उस चीज़ तक पहुंच सकता है, जिसे उसकी आवश्यकता है।

Comments

"मैंने जनवरी में इस बैक के बारे में एक ब्लॉग पोस्ट लिखा था जिसमें npm, Gulp और अन्य विवरणों का एक पूरा गुच्छा था जो आज भी प्रासंगिक हैं।" तथ्य यह है कि जनवरी - जून से और आपको अभी भी प्रासंगिक होना है, इस फ्लाई-बाय-नाइट सामान में से किसी को जानने के लिए परेशान होने के साथ वास्तव में मेरी समस्या है। मैंने पहले से ही फैशन पर अपना समय बर्बाद किए बिना बहुत कुछ सीखना है। आपकी गलती नहीं डेविड, आप बहुत मददगार हो रहे हैं, लेकिन मुझे यह नई दुनिया पसंद नहीं है।

— ल्यूक पुप्लेट

Answer 7

बहुत सरल दृष्टिकोण OdeToCode.UseNodeModules Nuget पैकेज का उपयोग करना है। मैंने अभी .Net Core 3.0 के साथ इसका परीक्षण किया। आपको बस इतना करना है कि पैकेज को समाधान में जोड़ना है और इसे स्टार्टअप क्लास के कॉन्फ़िगर विधि में संदर्भित करना है:

app.UseNodeModules();

मैंने इसके बारे में एएसपी.नेट कोर, एमवीसी, एंटिटी फ्रेमवर्क कोर, बूटस्ट्रैप और शॉन वाइल्डरमथ द्वारा एंगुलर प्लुरललाइट कोर्स के साथ एक उत्कृष्ट इमारत से सीखा ।

Comments

और आप npm पैकेज कैसे जोड़ते हैं?

— ल्यूका ज़िगलर

अपने प्रोजेक्ट में npm पैकेज जोड़ने के कई तरीके हैं। मैं उन्हें केवल पैकेज में टाइप करना पसंद करता हूं। निर्भरता नोड के तहत जज फाइल के रूप में यहां बताया गया है: stackoverflow.com/a/49264424/5301317

— Mariusz Bialobrzeski

@MariuszBialobrzeski साझा करने के लिए धन्यवाद। यह एक साफ समाधान है।

— Sau001

@MariuszBialobrzeski क्या आपको अपने DevOps पाइपलाइन में नोड_मॉडल से स्थिर सामग्री को तैनात करने के लिए कुछ अतिरिक्त करना था? या आपने नोड_मॉडल्स फ़ोल्डर में जांच की है?

— Sau001

@ Sau001 दुर्भाग्य से मुझे कभी भी DevOps पाइपलाइनों के साथ काम करने का मौका नहीं मिला। नोड_मॉडल फ़ोल्डर बहुत बड़ा हो जाता है इसलिए मैं निश्चित रूप से यदि संभव हो तो इसकी जाँच करने से बचता हूँ।

— Mariusz Bialobrzeski

Answer 8

Shawn Wildermuth का यहाँ एक अच्छा मार्गदर्शक है: https://wildermuth.com/2017/11/19/ASP-NET-Core-2-0-and-the-End-of-Bower

लेख GitHub पर gulpfile से जुड़ता है जहां उसने लेख में रणनीति को लागू किया है। आप बस अपनी अधिकांश सामग्री को कॉपी और पेस्ट कर सकते हैं, लेकिन पैकेज में उचित पैकेज जोड़ें।

Answer 9

मैंने एक बेहतर तरीका पाया है कि मैं अपनी परियोजना में JS पैकेज को NPM गुलप / ग्रंट टास्क रनर के साथ कैसे प्रबंधित करूं। मुझे यह पसंद नहीं है कि "स्वचालन" को संभालने के लिए जावास्क्रिप्ट लाइब्रेरी की एक और परत के साथ एक एनपीएम हो, और मेरी नंबर एक की आवश्यकता है बिना किसी अन्य चिंता के एनपीएम अपडेट को सरल तरीके से चलाने के बारे में अगर मुझे गुलाल सामान चलाने की आवश्यकता है अगर यह सफलतापूर्वक सब कुछ कॉपी किया और इसके विपरीत।

एनपीएम तरीका:

• JS मिनिफ़र को पहले ही ASP.net कोर में बंडल किया गया है, bundleconfig.json की तलाश करें ताकि यह मेरे लिए कोई समस्या न हो (कुछ कस्टम को संकलित न करें)
• एनपीएम के बारे में अच्छी बात यह है कि एक अच्छी फ़ाइल संरचना है, इसलिए मैं हमेशा नोड_मॉडल / मॉड्यूल / डिस्ट के तहत निर्भरता के पूर्व संकलित / मिनीकृत संस्करण पा सकता हूं।
• मैं एक NPM नोड_modules / .hooks / {eventname} स्क्रिप्ट का उपयोग कर रहा हूं, जो प्रोजेक्ट / wwwroot / lib / मॉड्यूल / dist / .js फ़ाइलों की कॉपी / अपडेट / डिलीट को हैंडल कर रहा है, आप यहां प्रलेखन पा सकते हैं। https: //। docs.npmjs.com/misc/scripts (मैं उस स्क्रिप्ट को अपडेट करूंगा जिसका उपयोग मैं एक बार करने के लिए उपयोग कर रहा हूं क्योंकि यह अधिक पॉलिश होगा) मुझे अतिरिक्त टास्क रनर ( .js टूल जो मुझे पसंद नहीं हैं) की आवश्यकता नहीं है। क्या मेरी परियोजना को साफ और सरल रखता है।

अजगर रास्ता:

https://pypi.python.org/pyp ... लेकिन इस मामले में आपको मैन्युअल रूप से स्रोतों को बनाए रखने की आवश्यकता है

Answer 10

कृपया इस पोस्ट की लंबाई का बहाना करें।

यह ASP.NET कोर संस्करण 2.5 का उपयोग करके एक कार्यशील उदाहरण है।

ध्यान देने योग्य बात यह है कि प्रोजेक्ट .json अप्रचलित है ( यहाँ देखें ) .csproj के पक्ष में । एक मुद्दा .csproj के साथ । फ़ाइल बड़ी मात्रा में सुविधाएँ है और इसके प्रलेखन के लिए कोई केंद्रीय स्थान नहीं है ( यहाँ देखें )।

एक और बात, यह उदाहरण एक डॉक लिनक्स (अल्पाइन 3.9) कंटेनर में ASP.NET कोर चल रहा है; इसलिए रास्ते यही दर्शाते हैं। यह भी gulp ^ 4.0 का उपयोग करता है। हालांकि, कुछ संशोधन के साथ, इसे ASP.NET Core, Gulp, NodeJS के पुराने संस्करणों के साथ काम करना चाहिए, और डॉकर के बिना भी।

लेकिन यहाँ एक जवाब है:

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
};

.Csproj फ़ाइल में एक लक्ष्य जोड़ें । सूचना हम भी एक जोड़ा घड़ी देख सकते हैं और बाहर निकालने के हम का लाभ लेने के अगर करने के लिए आदेश।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इसे चलाया जाएगा तो यह नोड मॉड्यूल को भी स्थापित और निर्मित करेगा।