যদিও Liviu Costea এর উত্তর সঠিক হয়, তা এখনও আমার বেশ কিছু সময়ের নেন জিনিসটা কিভাবে এটি আসলে সম্পন্ন করা হয়। সুতরাং এখানে আমার ধাপে ধাপে গাইডটি একটি নতুন এএসপি.নেট 4.5.2 এমভিসি প্রকল্প থেকে শুরু হচ্ছে। এই গাইডটিতে বোরই ব্যবহার করে ক্লায়েন্ট-সাইড প্যাকেজ পরিচালনা অন্তর্ভুক্ত রয়েছে তবে (এখনও) বান্ডিলিং / গ্রান্ট / গল্প কভার করে না।
পদক্ষেপ 1 (প্রকল্প তৈরি করুন)
ভিজ্যুয়াল স্টুডিও 2015 সহ একটি নতুন এএসপি.নেট 4.5.2 প্রকল্প (এমভিসি টেম্পলেট) তৈরি করুন।
পদক্ষেপ 2 (প্রকল্প থেকে বান্ডিলিং / অপ্টিমাইজেশন সরান)
পদক্ষেপ 2.1
নিম্নলিখিত নুগেট প্যাকেজ আনইনস্টল করুন:
- বুটস্ট্র্যাপ
- মাইক্রোসফ্ট.জকুরি.অনবস্ট্রাস্টিভ.ভালিডেশন
- jQuery.Validation
- jQuery
- মাইক্রোসফ্ট.এস্পনেট.ওয়েব.অપ્টিমাইজেশন
- ওয়েবগ্রিজ
- অ্যান্টলার
- মডার্নজার
- সাড়া দিন
পদক্ষেপ 2.2
App_Start\BundleConfig.cs
প্রকল্প থেকে সরান ।
পদক্ষেপ 2.3
অপসারণ
using System.Web.Optimization;
এবং
BundleConfig.RegisterBundles(BundleTable.Bundles);
থেকে Global.asax.cs
পদক্ষেপ 2.4
অপসারণ
<add namespace="System.Web.Optimization"/>
থেকে Views\Web.config
পদক্ষেপ 2.5
এর কাছ থেকে System.Web.Optimization
এবং এর মধ্যে সমাবেশের বাইন্ডিংগুলি সরান RemoveWebGrease
Web.config
পদক্ষেপ 3 (প্রকল্পে ধনুক যোগ করুন)
পদক্ষেপ 3.1
package.json
প্রকল্পে নতুন ফাইল যুক্ত করুন ( NPM configuration file
আইটেম টেম্পলেট)
পদক্ষেপ 3.2
যোগ bower
করার জন্য devDependencies
:
{
"version": "1.0.0",
"name": "ASP.NET",
"private": true,
"devDependencies": {
"bower": "1.4.1"
}
}
যখন package.json
সংরক্ষণ করা হবে তখন বোভার প্যাকেজটি স্বয়ংক্রিয়ভাবে ইনস্টল হবে ।
পদক্ষেপ 4 (বোভার কনফিগার করুন)
পদক্ষেপ 4.1
bower.json
প্রকল্পে নতুন ফাইল যুক্ত করুন ( Bower Configuration file
আইটেম টেম্পলেট)
পদক্ষেপ 4.2
যোগ bootstrap
, jquery-validation-unobtrusive
, modernizr
এবং respond
নির্ভরতা হবে:
{
"name": "ASP.NET",
"private": true,
"dependencies": {
"bootstrap": "*",
"jquery-validation-unobtrusive": "*",
"modernizr": "*",
"respond": "*"
}
}
এই প্যাকেজগুলি এবং তাদের নির্ভরতাগুলি স্বয়ংক্রিয়ভাবে ইনস্টল হবে যখন bower.json
সংরক্ষণ হয়।
পদক্ষেপ 5 (পরিবর্তন করুন Views\Shared\_Layout.cshtml
)
পদক্ষেপ 5.1
প্রতিস্থাপন
@Styles.Render("~/Content/css")
সঙ্গে
<link rel="stylesheet" href="~/wwwroot/lib/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="~/Content/Site.css" />
পদক্ষেপ 5.2
প্রতিস্থাপন
@Scripts.Render("~/bundles/modernizr")
সঙ্গে
<script src="~/wwwroot/lib/modernizr/modernizr.js" ></script>
পদক্ষেপ 5.3
প্রতিস্থাপন
@Scripts.Render("~/bundles/jquery")
সঙ্গে
<script src="~/wwwroot/lib/jquery/dist/jquery.min.js"></script>
পদক্ষেপ 5.4
প্রতিস্থাপন
@Scripts.Render("~/bundles/bootstrap")
সঙ্গে
<script src="~/wwwroot/lib/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="~/wwwroot/lib/respond/dest/respond.min.js"></script>
পদক্ষেপ ((অন্যান্য উত্স সংশোধন করুন)
সমস্ত অন্যান্য ভিউ প্রতিস্থাপন
@Scripts.Render("~/bundles/jqueryval")
সঙ্গে
<script src="~/wwwroot/lib/jquery-validation/dist/jquery.validate.min.js"></script>
<script src="~/wwwroot/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.min.js"></script>
উপকারী সংজুক
বন্ডলিং ও মিনিফাইং
নীচের মন্তব্য LavaHot বিশেষ পরামর্শ দেওয়া হচ্ছে Bundler & Minifier এক্সটেনশন ডিফল্ট bundler যা আমি পদক্ষেপ 2. এছাড়াও তিনি বিশেষ পরামর্শ দেওয়া হচ্ছে যে অপসারণ জন্য একটি প্রতিস্থাপন হিসাবে এই নিবন্ধটি Gulp সঙ্গে bundling উপর।