এএসপি.নেট কোর দিয়ে এনপিএম কীভাবে ব্যবহার করবেন

Question

আমি আমার এএসপি.নেট কোর অ্যাপ্লিকেশনটির জন্য আমার প্রয়োজন জে জিকিরি, বুটস্ট্র্যাপ, ফন্ট আশ্চর্য এবং অনুরূপ ক্লায়েন্ট লাইব্রেরি পরিচালনা করতে এনপিএম ব্যবহার করছি।

আমার জন্য যে পদ্ধতির কাজ করেছে তা প্রকল্পে একটি প্যাকেজ.জসোন ফাইল যুক্ত করে শুরু হয়েছিল, যা দেখতে এটির মতো দেখাচ্ছে:

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

এনপিএম এই প্যাকেজগুলি নোড_মডিউল ফোল্ডারে পুনরুদ্ধার করে যা প্রকল্প ডিরেক্টরিতে wwwroot হিসাবে একই স্তরে থাকে:

যেহেতু এএসপি.নেট কোর wwwroot ফোল্ডার থেকে স্ট্যাটিক ফাইলগুলি পরিবেশন করে এবং নোড_মডিউলগুলি সেখানে নেই, তাই এই কাজটি করার জন্য আমাকে বেশ কয়েকটি পরিবর্তন করতে হয়েছিল, প্রথমটি: আমার স্টার্টআপে অ্যাপ্লিকেশন-ইউজফাইস সার্ভারের ঠিক আগে যোগ করুন .উসস্ট্যাটিক ফাইলস my সিএস ফাইল:

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

app.UseStaticFiles();

এবং দ্বিতীয়টি, প্রজেক্ট.জসন ফাইলটিতে আমার প্রকাশিত নোড_মডিউলগুলি সহ:

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

এটি আমার বিকাশের পরিবেশে কাজ করে এবং এটি যখন আমার Azure অ্যাপ্লিকেশন পরিষেবা উদাহরণে স্থাপন করি তখন এটি কাজ করে, জ্যাকোয়ারি, বুটস্ট্র্যাপ এবং ফন্ট-বিস্ময়কর স্ট্যাটিক ফাইলগুলি ভাল পরিবেশন করা হবে, তবে আমি এই বাস্তবায়ন সম্পর্কে নিশ্চিত নই।

এটি করার জন্য সঠিক পদ্ধতি কী?

বেশ কয়েকটি উত্স থেকে প্রচুর পরিমাণে বিট সংগ্রহ করা এবং কাজ না করা এমন কিছু চেষ্টা করার পরে এই সমাধানটি এসেছিল এবং wwwroot এর বাইরে থেকে এই ফাইলগুলি পরিবেশন করা কিছুটা অদ্ভুত বলে মনে হচ্ছে।

যে কোন উপদেশ সাদরে গ্রহন করা হবে।

Comments

দরকারী লিঙ্ক হতে পারে: blog.nbellocam.me/2016/03/14/asp-net-core- এবং-angular-2

— অ্যাডেম ক্যাগলিন

এই লিঙ্কে ওয়ার্কিং উদাহরণ রয়েছে ASP.NET কোর W / npm : ievangelistblog.wordpress.com/2016/01/13/...

— ডেভিড পাইন

আমার কাছে ঘটে যাওয়া একটি জিনিসটি হ'ল Bundler and Minifier- উত্সটি নির্দিষ্ট করুন বাইরের wwwroot এবং যখন আপনি এটি তৈরি করেন তখন জেএসকে wwwroot এ তৈরি করে। এটি যথাযথ উপায় .. আপনি নোড_মডিউলগুলি থেকে সামগ্রী পরিবেশন করা উচিত নয়

— কুলা

স্থিতিশীলভাবে node_modulesফোল্ডারটি পরিবেশন করা থেকে আমি কাউকে অত্যন্ত নিরুৎসাহিত করব । ক) ইকো-সিস্টেমটি কীভাবে ডিজাইন করা হয়েছে তা নয় খ) এটি সুরক্ষা ঝুঁকিপূর্ণ, আপনার ইনস্টল করা একটি প্যাকেজ সংবেদনশীল তথ্য ফাঁস হতে পারে। সঠিক ভাবে সেট-আপ একটি বিল্ডিং পাইপলাইন হয় (ঘোঁৎ ঘোঁৎ / নি: শ্বাসে / নোড / webpack) যে একটি ফাইল প্রকাশ 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

আমি এই প্রশ্নটির উত্তর কীভাবে তা নিয়ে একটু বিভ্রান্ত হয়ে পড়েছি। মাইক্রোসফ্টের এখানে গুল্প কনফিগার করার জন্য ঠিক একই জিনিস রয়েছে ( ডকস.মাইক্রোসফট.ইন / ইউএস / এসপিনেট / कोर / ক্লিয়েন্টসাইড / ইউজিং-গল্প )। তবে যতদূর আমি বলতে পারি এটি আমার নোড_মডিউলগুলির ডিরেক্টরি থেকে কন্টেন্ট নেয় না এবং এটিকে 'লাইব' এ যুক্ত করে না বা আমার যে কোনও ফাইলে এটি ব্যবহারযোগ্য করে তোলে না ... আমি এটিতে খুব নতুন তাই আপাতদৃষ্টিতে অবিশ্বাস্যরূপে বিভ্রান্ত হয়ে পড়েছি ওয়েব ডেভলপমেন্টের জটিল নতুন বিশ্ব ...

— জেরার্ড উইলকিনসন

জটিল। আমি সম্পূর্ণরূপে ফ্রন্ট-এন্ড ছেড়ে দিতে এবং কেবল এপিআইতে কাজ করতে প্রস্তুত।

— লুক পুপলেট

এটি সাধারণভাবে সঠিক পন্থা, তবে উত্তরটি একটি গুরুত্বপূর্ণ পদক্ষেপটি ছাড়বে: নোড_মডিউলগুলি ফোল্ডার থেকে ফাইলকে একটি বৃহত্তর টাস্ক হিসাবে wwwroot ফোল্ডারে অনুলিপি করা। Var nodeRoot = './node_modules/' দিয়ে শুরু করুন; এবং একটি টাস্ক যুক্ত করুন যা নোডরুট থেকে পছন্দসই সাবফোল্ডারটিকে ওয়েবরুটের উপযুক্ত সাবফোল্ডারটিতে অনুলিপি করে। বিশদ দেওয়ার এখন আর সময় নেই, তবে আগ্রহ থাকলে আমি পরে বিশদ যুক্ত করতে পারি।

— ডগ

কেন কেউ স্পষ্টভাবে উত্থাপিত হয়নি: "আমাদের এই প্রশ্নটি কেন জিজ্ঞাসা করতে হবে!" আমরা কেন ইচ্ছাকৃতভাবে এমন স্থানে ফাইল ইনস্টল করব যেখানে সেগুলি ব্যবহার করা যায় না? তারপরে, যেহেতু আমাদের ফাইলগুলি অ্যাক্সেসযোগ্য নয়, আমরা সেগুলি যেখানে ব্যবহার করা যেতে পারে সেখানে সেগুলি অনুলিপি করার জন্য একটি বিস্তৃত ইউটিলিটি ইনস্টল এবং কনফিগার করি। এটা সত্যিই হাস্যকর।

— স্যাম

কারণ এখানে সরঞ্জামাদি কর্কশ, মূলত। আপনি যে কোনও কিছুর জন্য যেমন এনএমপি ব্যবহার করেন ঠিক তেমন এনপিএম ব্যবহার করে । এএসপি.নেট কোরের সাথে সুনির্দিষ্ট কিছু নেই। সমস্ত কিছু goes node_modulesুকে যায় কারণ এটি এনপিএম করে। জিনিসগুলি সঠিক জায়গায় স্থানান্তরিত করার জন্য গাল্প টাস্কটি প্রয়োজনীয়, অর্থাত্ যেখানে আপনার আসলে এটি দরকার। আমি মনে করি যে সমস্যাটি হ'ল মাইক্রোসফ্ট বোভারের সাথে এত সুন্দর একটি সংহতকরণ সরবরাহ করেছিল তবে এখন বোভার মারা গেছে (বা কমপক্ষে মারা যাচ্ছে) এবং মাইক্রোসফ্ট কোনও বিকল্প সরঞ্জামাদি সরবরাহ করে নি।

— ক্রিস প্র্যাট

Answer 2

• npmক্লায়েন্ট-সাইড লাইব্রেরি পরিচালনার জন্য ব্যবহার করা ভাল পছন্দ (বোভার বা নিউগেটের বিপরীতে), আপনি সঠিক দিকে চিন্তা করছেন :)
• স্প্লিট সার্ভার-সাইড (এএসপি.নেট কোর) এবং ক্লায়েন্ট-সাইড (যেমন অ্যাঙ্গুলার 2, এমবার, রিএ্যাক্ট) প্রকল্পগুলিকে পৃথক ফোল্ডারে বিভক্ত করুন (অন্যথায় আপনার এএসপি.নেট প্রকল্পে ক্লায়েন্ট-সাইড কোড, নোড_মডিউলগুলির ইউনিট পরীক্ষার প্রচুর শব্দ হতে পারে) ফোল্ডার, শিল্প তৈরি ইত্যাদি) build আপনার সাথে একই দলে কাজ করা ফ্রন্ট-এন্ড বিকাশকারীরা এর জন্য আপনাকে ধন্যবাদ জানাবে :)
• সমাধান স্তরে এনপিএম মডিউলগুলি পুনরুদ্ধার করুন (একইভাবে আপনি কীভাবে নুগেটের মাধ্যমে প্যাকেজগুলি পুনরুদ্ধার করবেন - প্রকল্পের ফোল্ডারে নয়), এইভাবে আপনি পৃথক ফোল্ডারে ইউনিট এবং ইন্টিগ্রেশন পরীক্ষাও করতে পারেন (ক্লায়েন্ট-সাইড জাভাস্ক্রিপ্ট পরীক্ষাগুলি আপনার অভ্যন্তরের অভ্যন্তরে রয়েছে) এএসপি.নেট কোর প্রকল্প)।
• স্ট্যাটিক ফাইল (.js, চিত্র ইত্যাদি) পরিবেশন করার জন্য পর্যাপ্ত পরিমাণে FileServerথাকা StaticFilesউচিত ব্যবহারের প্রয়োজন নেই might
• এক বা একাধিক অংশে আপনার ক্লায়েন্ট-সাইড কোডটি বান্ডিল করতে ওয়েবপ্যাক ব্যবহার করুন
• আপনি যদি ওয়েবপ্যাকের মতো কোনও মডিউল বান্ডিলার ব্যবহার করেন তবে আপনার গুল্প / গ্রান্টের প্রয়োজন নেই
• ES2015 + জাভাস্ক্রিপ্টে বিল্ড অটোমেশন স্ক্রিপ্টগুলি লিখুন (বাশ বা পাওয়ারশেলের বিপরীতে) তারা ক্রস-প্ল্যাটফর্মের কাজ করবে এবং বিভিন্ন ওয়েব বিকাশকারীদের কাছে আরও অ্যাক্সেসযোগ্য হবে (প্রত্যেকে আজকাল জাভাস্ক্রিপ্ট বলে)
• এর নাম পরিবর্তন wwwrootকরুন public, অন্যথায় অ্যাজুরে ওয়েব অ্যাপ্লিকেশনগুলির ফোল্ডার কাঠামো বিভ্রান্তিকর হবে ( D:\Home\site\wwwroot\wwwrootবনাম D:\Home\site\wwwroot\public)
• আজুর ওয়েব অ্যাপ্লিকেশনগুলিতে কেবল সংকলিত আউটপুট প্রকাশ করুন (আপনার কখনও node_modulesওয়েব হোস্টিং সার্ভারে চাপ দেওয়া উচিত নয় )। tools/deploy.jsএকটি উদাহরণ হিসাবে দেখুন ।

পরিদর্শন ASP.NET কোর স্টার্টার কিট GitHub থেকে (দাবিত্যাগ: আমি লেখক নই)

Comments

সুন্দর উত্তর, সম্প্রদায়কে স্টার্টার কিট সরবরাহ করার জন্য আপনার কাজের জন্য কুডোস!

— ডেভিড পাইন

আমি এই বছরের শুরুতে একটি বড় ইউকে ব্র্যান্ডের জন্য সফলভাবে একটি বিশাল পাবলিক অ্যাংুলার অ্যাপ্লিকেশন তৈরি করেছি এবং এখনও আমি এই উত্তরটির বেশিরভাগটি বুঝতে পারি না। এমনকি এটি পুরো জায়গাতেই এটি শিখতে শুরু করতে পারি না। আক্ষরিক অর্থে ক্যারিয়ারের সংকট রয়েছে।

— লুক পুপলেট

ক্লায়েন্টের পাশের স্ক্রিপ্টগুলি এবং ফাইলগুলি লেখার এবং পরিচালনা করার সময় এটি করা এবং না করার একটি ভাল সারাংশ। আমার সময় এবং গবেষণা সংরক্ষণ করেছেন। আপনাকে কুডোস!

— সংগীতা

দুর্ভাগ্যক্রমে, ভিজ্যুয়াল স্টুডিও (নির্বোধ আইএমএইচও) কেবলমাত্র তার নামের উপর ভিত্তি করে "wwwroot" ডিরেক্টরিটি বিশেষভাবে বিবেচনা করে, সমাধান এক্সপ্লোরারটিতে এটি একটি বিশেষ "ওয়েব রুট" আইকন দেয় এবং এর বিষয়বস্তুগুলিকে "বিষয়বস্তু" না দিয়ে ডিফল্ট হিসাবে "কিছুই না" হিসাবে চিহ্নিত করে তোলে । যদি উদ্দেশ্য থাকে যে সেখানে স্ট্যাটিকালি-পরিবেশন করা ফাইলগুলি রাখা এবং আপনি ভিজ্যুয়াল স্টুডিও ব্যবহার করছেন, আপনার সম্ভবত নামটি "wwwroot" হিসাবে ছেড়ে দেওয়া উচিত। আমি একমত যদিও এটি একটি খারাপ নাম।

— জেজ

Answer 3

ভিজুয়াল স্টুডিও এক্সটেনশনে বান্ডলার এবং মিনিফায়ার ইনস্টল করুন

তারপরে আপনি একটি তৈরি 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 তে সরানো হয়েছিল। কোন ধারনা কিভাবে এটা ঠিক করতে হবে ?

— ভিপিপি

এটি কি আইডিই-অজিনস্টিক? আপনার টিমের কেউ ভিএস কোড ব্যবহার করে থাকলে কীভাবে এটি কাজ করবে এবং এই সিডিটি কীভাবে একটি পাইপলাইন তৈরি করবে?

— জ্যাকব স্ট্যাম

আপনি যখন বান্ডলার এবং মিনিফায়ার নুগেট প্যাকেজটি ইনস্টল করেন, তখন ডকস বলে যে এটি বিল্ড লক্ষ্যগুলি ইনজেকশন দেয় যা বিল্ড এবং ক্লিন টাইমে চালিত হয়। আমি মনে করি এটি একবার স্থানে থাকলে, কোন আইডিই ব্যবহৃত হয় তা নির্বিশেষে এটি ঠিকঠাক কাজ করবে, তাই না? আরও দেখুন: ডকস.মাইক্রোসফট

— Ciaran Gallagher

বান্ডলারটি কেবলমাত্র বিকাশের পরিবেশের বাইরে এই স্ক্রিপ্টগুলি নির্দিষ্ট করার জন্য দরকারী। আমার লেআউট পৃষ্ঠা থেকে এখনও আমার নিজের প্রয়োজন মতো জেএস এবং সিএসএস ফাইলগুলি ম্যানুয়ালি রেফারেন্স করতে হবে, তবে নোড_মডিউলগুলি ফোল্ডারটি ওয়েবসাইটের বাইরে রয়েছে ... সুতরাং আমি মনে করি না যে এটি সমস্যার যথাযথভাবে সম্বোধন করে, আপনার অনুলিপি করার জন্য এখনও একটি গুলপ স্ক্রিপ্ট দরকার আমার wwwroot ফোল্ডারে প্রয়োজনীয় ফাইলগুলি।

— সিয়ারান গ্যালাগার

Answer 4

আমি আপনাকে দুটি উত্তর দিতে। অন্যান্য সরঞ্জামগুলির সাথে মিলিত এনপিএম শক্তিশালী তবে সেটআপ করতে কিছু কাজ প্রয়োজন। আপনি যদি কেবল কয়েকটি লাইব্রেরি ডাউনলোড করতে চান তবে আপনি তার পরিবর্তে গ্রন্থাগার পরিচালক ব্যবহার করতে চাইতে পারেন (ভিজ্যুয়াল স্টুডিও 15.8 এ প্রকাশিত)।

এনপিএম (উন্নত)

প্রথমে আপনার প্রকল্পের মূলটিতে প্যাকেজ.জসন যুক্ত করুন । নিম্নলিখিত সামগ্রী যুক্ত করুন:

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

এটি এনপিএমকে বুটস্ট্র্যাপ, জিউকিউরি এবং অন্যান্য লাইব্রেরি ডাউনলোড করবে যা নোড_মডিউলস নামে একটি ফোল্ডারে একটি নতুন এএসপিএন কোর প্রকল্পে ব্যবহৃত হয়। পরবর্তী পদক্ষেপটি একটি উপযুক্ত জায়গায় ফাইলগুলি অনুলিপি করা হয়। এটি করার জন্য আমরা গুল্প ব্যবহার করব যা এনপিএমও ডাউনলোড করেছিল। তারপরে 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 এ ডান ক্লিক করেন তবে আপনি টাস্ক রানার এক্সপ্লোরার নির্বাচন করতে পারেন । এখান থেকে আপনি ফাইলগুলি অনুলিপি করতে বা পরিষ্কার করতে গুল্প ম্যানুয়ালি চালাতে পারেন।

গুল্প জাভাস্ক্রিপ্ট এবং সিএসএস-ফাইলগুলি মাইনাইফ করার মতো অন্যান্য কাজের জন্যও কার্যকর হতে পারে:

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

গ্রন্থাগার পরিচালক (সাধারণ)

আপনার প্রকল্পে ডান ক্লিক করুন এবং ক্লায়েন্টের পাশের লাইব্রেরিগুলি নির্বাচন করুন । Libman.json ফাইলটি এখন উন্মুক্ত। এই ফাইলে আপনি নির্দিষ্ট করে নিন যে কোন লাইব্রেরি এবং ফাইলগুলি ব্যবহার করতে হবে এবং সেগুলি স্থানীয়ভাবে কোথায় সংরক্ষণ করা উচিত। সত্যিই সহজ! একটি নতুন এএসপি.নেট কোর 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

এটিও সাহায্য করতে পারে

ভিজ্যুয়াল স্টুডিও 2015 এএসপি ডট নেট 5, গুলপ টাস্ক নোড_মডিউলগুলি থেকে ফাইলগুলি অনুলিপি করছে না

Comments

আমি সত্যিই দ্বিতীয় লিঙ্কটি পছন্দ করি, কোনওভাবে পরিচিত বলে মনে হচ্ছে। ;)

— ডেভিড পাইন

আপনি যখন এনপিএম মডিউল এবং ক্লায়েন্ট-সাইড কোড বিল্ড আউটপুটটির সাথে এএসপি.নেট কোর ওয়েব অ্যাপ্লিকেশন উত্স ফাইলগুলি মিশ্রণ করেন তখন এটি খুব সুবিধাজনক নয়। এ কারণেই এএসপি.এনইটি টিম গুলপ, প্যাকেজ.জসনকে ডিফল্ট এএসপি.নেট এমভিসি প্রকল্পের টেম্পলেটগুলি থেকে সরিয়ে দিচ্ছে।

— কনস্ট্যান্টিন তারকাস

আমি যে জানি না। আমি যখন মার্চ মাসে ভিএস লাইভ এ ছিলাম তখন তারা সকলেই এ সম্পর্কে ছিল তবে তার পর থেকে এটি অনেকটাই পরিবর্তিত হয়েছে।

— ডেভ_750০

Answer 6

এটি করার জন্য সঠিক পদ্ধতি কী?

অনেকগুলি "ডান" দৃষ্টিভঙ্গি রয়েছে, আপনি কেবল ঠিক করেছেন যে কোনটি আপনার প্রয়োজনের জন্য সেরা স্যুট। দেখে মনে হচ্ছে আপনি কীভাবে ব্যবহার করবেন তা ভুল বুঝছেন node_modules...

আপনি যদি নুগেটের সাথে পরিচিত হন তবে আপনার এনপিএমকে তার ক্লায়েন্ট-সাইড কাউন্টার হিসাবে ভাবা উচিত । কোথায় node_modulesডিরেক্টরির মত হল binকরার জন্য ডিরেক্টরি NuGet । ধারণা যে এই ডিরেক্টরির সংরক্ষণকারী প্যাকেজের জন্য তো শুধু একটি সাধারণ অবস্থান হল, আমার মতে এটি একটি নিতে উত্তম dependencyপ্যাকেজ আপনার যা দরকার হিসাবে আপনি মধ্যে সম্পন্ন করেছে package.json। তারপরে কোনও টাস্ক রানার Gulpব্যবহার করুন যেমন আপনার পছন্দসই ফাইলগুলি কপি করতেwwwroot স্থানে ।

আমি জানুয়ারিতে এ সম্পর্কে একটি ব্লগ পোস্ট লিখেছিলাম যে এনপিএম , গুল্প এবং অন্যান্য বিবরণগুলির পুরো গুচ্ছ যা এখনও প্রাসঙ্গিক। অতিরিক্তভাবে, কেউ আমার জিজ্ঞাসা প্রশ্নটির দিকে মনোযোগ বলেছিল এবং শেষ পর্যন্ত নিজেকে এখানে উত্তর দিয়েছিল যা সম্ভবত সহায়ক।

আমি এমন একটি তৈরি করেছি Gistযা gulpfile.jsউদাহরণ হিসাবে দেখায় ।

আপনার মধ্যে Startup.csস্থির ফাইলগুলি ব্যবহার করা এখনও গুরুত্বপূর্ণ:

app.UseStaticFiles();

এটি নিশ্চিত করবে যে আপনার অ্যাপ্লিকেশনটির যা প্রয়োজন তা অ্যাক্সেস করতে পারে।

Comments

"আমি জানুয়ারীতে এ সম্পর্কে একটি ব্লগ পোস্ট লিখেছিলাম যে এনপিএম, গুল্প এবং অন্যান্য বিবরণগুলির পুরো গুচ্ছ যা এখনও প্রাসঙ্গিক।" জানুয়ারী - জুন থেকে এবং আপনাকে উল্লেখ করতে হবে যে এখনও প্রাসঙ্গিক হ'ল ঠিক এই যে কোনও ফ্লাই বাই নাইট স্টাফ শিখতে বিরক্ত করার সাথে আমার সমস্যা। আমি ফ্যাশনে আমার সময় নষ্ট না করে ইতিমধ্যে অনেক কিছু শিখতে পেরেছি। আপনার দোষ ডেভিড নয়, আপনি খুব সহায়ক হচ্ছেন, তবে আমি এই সাময়িক নতুন পৃথিবী পছন্দ করি না।

— লুক পুপলেট 9

Answer 7

OdeToCode.UseNodeModules নিউগেট প্যাকেজটি ব্যবহার করা খুব সহজ পদ্ধতির । আমি এটি। নেট কোর 3.0 দিয়ে পরীক্ষা করেছি tested আপনাকে যা করতে হবে তা হল সমাধানে প্যাকেজ যুক্ত করা এবং এটি স্টার্টআপ শ্রেণীর কনফিগার পদ্ধতিতে উল্লেখ করা:

app.UseNodeModules();

শন ওয়াইল্ডমারথের এএসপি.এনইটি কোর, এমভিসি, সত্তা ফ্রেমওয়ার্ক কোর, বুটস্ট্র্যাপ এবং অ্যাংুলার বহুবর্ণদর্শন কোর্সের সাথে দুর্দান্ত বিল্ডিং একটি ওয়েব অ্যাপ থেকে আমি এটি সম্পর্কে শিখেছি ।

Comments

এবং কীভাবে আপনি এনপিএম প্যাকেজ যুক্ত করবেন?

— লুকা জিগলার

আপনার প্রকল্পে এনপিএম প্যাকেজ যুক্ত করার বিভিন্ন উপায় রয়েছে। : আমি শুধুমাত্র নির্ভরতা অধীনে package.json ফাইলে তাদের টাইপ করতে পছন্দ করা নোড এখানে ব্যাখ্যা stackoverflow.com/a/49264424/5301317

— Mariusz Bialobrzeski

@ মারিউজবিয়ালোব্রেজেস্কি ভাগ করে নেওয়ার জন্য ধন্যবাদ। এটি একটি ঝরঝরে সমাধান।

— Sau001

@ মারিউজবিয়ালোব্রজেস্কি আপনার ডিভোপস পাইপলাইনে নোড_মডিউলগুলি থেকে স্থির সামগ্রীটি মোতায়েন করার জন্য আপনার কি অতিরিক্ত কিছু করতে হবে? অথবা আপনি নোড_মডিউলস ফোল্ডারে চেক করেছেন?

— Sau001

@ Sau001 দুর্ভাগ্যক্রমে আমার কখনই ডিওওপ্স পাইপলাইনগুলির সাথে কাজ করার সুযোগ হয়নি। নোড_মডিউলস ফোল্ডারটি বেশ বড় হয়ে ওঠে তাই আমি যদি সম্ভব হয় তবে অবশ্যই এটি পরীক্ষা করা এড়াতে চাই।

— মারিউজ বিয়ালোব্রজেস্কি

Answer 8

শন ওয়াইল্ডমারথের এখানে একটি দুর্দান্ত গাইড রয়েছে: https://wildermuth.com/2017/11/19/ASP-NET-Core-2-0-and-the-End-of-Bower

নিবন্ধটি গিটহাবের গলফিলের সাথে লিঙ্ক করেছে যেখানে তিনি নিবন্ধটিতে কৌশলটি প্রয়োগ করেছেন। আপনি কেবল গলফিলের বেশিরভাগ বিষয়বস্তু অনুলিপি করে আপনার মধ্যে পেস্ট করতে পারবেন তবে ডিভিল্যান্ডেন্সের অধীনে প্যাকেজ.জসনে যথাযথ প্যাকেজ যুক্ত করতে ভুলবেন না: গল্ফ গল্প-উগ্লিফাই গল্প-কনক্যাট রিম্রাফ মার্জ-স্ট্রিম

Answer 9

আমি এনপিএম গুল্প / গ্রান্ট টাস্ক রানারদের সাথে আমার প্রকল্পে জেএস প্যাকেজ পরিচালনা করার জন্য আরও ভাল উপায় খুঁজে পেয়েছি। "অটোমেশন" পরিচালনা করতে জাভাস্ক্রিপ্ট লাইব্রেরির অন্য একটি স্তর সহ একটি এনপিএম রাখার ধারণাটি আমি পছন্দ করি না, এবং আমার প্রথম ওজনের প্রয়োজনটি হল যে আমাকে গুল্প স্টাফ চালাতে হবে কিনা তা নিয়ে কোনও উদ্বেগ ছাড়াই এনপিএম আপডেট চালানো, যদি এটি সফলভাবে সবকিছু অনুলিপি করে এবং বিপরীতে।

এনপিএম উপায়:

• জেএস মিনিফায়ারটি ইতিমধ্যে ASP.net কোরতে বান্ডিল হয়েছে, bundleconfig.json সন্ধান করুন যাতে এটি আমার পক্ষে কোনও সমস্যা নয় (কাস্টম কিছু সংকলন না করে)
• এনপিএম সম্পর্কে ভাল জিনিসটি হ'ল একটি ভাল ফাইল কাঠামো থাকে তাই আমি সর্বদা নোড_মডিউলগুলি / মডিউল / ডিস্টের অধীনে নির্ভরতার প্রাক-সংকলিত / মিনিফাইড সংস্করণগুলি খুঁজে পেতে পারি can
• আমি একটি এনপিএম নোড_মডিউল /। হুক্স / {ইভেন্ট নেম} স্ক্রিপ্ট ব্যবহার করছি যা প্রকল্প / wwwroot / lib / মডিউল / dist / .js ফাইলগুলির অনুলিপি / আপডেট / মুছে ফেলছে , আপনি এখানে ডকুমেন্টেশনটি পেতে পারেন https: // docs.npmjs.com/misc/scriptts (আমি একবারে আরও পালিশ হয়ে যাওয়ার পরে আমি যে স্ক্রিপ্টটি গিটে ব্যবহার করছি তা আপডেট করব) আমার অতিরিক্ত টাস্ক রানার ( আমার কাছে পছন্দ না .js সরঞ্জামের) দরকার নেই কি আমার প্রকল্প পরিষ্কার এবং সহজ রাখে।

অজগর উপায়:

https://pypi.python.org/pyp ... তবে এই ক্ষেত্রে আপনাকে উত্সগুলি নিজেই বজায় রাখতে হবে

Answer 10

অনুগ্রহ করে এই পোস্টের দৈর্ঘ্য ক্ষমা করুন।

এটি ASP.NET কোর সংস্করণ 2.5 ব্যবহার করে একটি কার্যকারী উদাহরণ।

নোট কিছু যে হয় project.json অপ্রচলিত ( এখানে দেখতে ) পক্ষে .csproj । .Csproj এর সাথে একটি সমস্যা । ফাইলটি বিশাল পরিমাণের বৈশিষ্ট্য এবং এর ডকুমেন্টেশনের জন্য কোনও কেন্দ্রীয় অবস্থান নেই ( এখানে দেখুন )।

আরও একটি বিষয়, এই উদাহরণটি ডকার লিনাক্স (আলপাইন 3.9) ধারকটিতে ASP.NET কোর চালাচ্ছে; সুতরাং পথগুলি প্রতিফলিত করবে। এটি gulp ^ 4.0 ব্যবহার করে। যাইহোক, কিছু সংশোধন করে, এটি এএসপি.এনইটি কোর, গুল্প, নোডজেএস এবং ডকার ছাড়াই পুরানো সংস্করণগুলির সাথে কাজ করা উচিত।

তবে এখানে একটি উত্তর:

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এটি চালানো হবে এটি নোড মডিউলগুলিও ইনস্টল এবং তৈরি করবে।