Visual Studio 2015 มาพร้อมกับการสนับสนุนเครื่องมือเช่น Grunt, Bower, Gulp และ NPM สำหรับโครงการ ASP.NET 5

อย่างไรก็ตามเมื่อฉันสร้างโครงการ ASP.NET 4.5.2 โดยใช้ Visual Studio 2015 จะไม่ใช้เครื่องมือเหล่านี้ ฉันต้องการใช้ bower แทน nuget เพื่อจัดการแพ็คเกจฝั่งไคลเอ็นต์

ฉันสามารถค้นหาข้อมูลเกี่ยวกับการใช้เครื่องมือเหล่านี้กับ Visual Studio 2013 ได้ (ดูตัวอย่างคำถามนี้ ) แต่ฉันเดาว่าขั้นตอนจะแตกต่างกันสำหรับ Visual Studio 2015 เนื่องจากมีการสนับสนุนเครื่องมือเหล่านี้ในตัว

ในขณะที่คำตอบของ Liviu Costeaนั้นถูกต้อง แต่ก็ยังต้องใช้เวลาพอสมควรในการหาคำตอบว่ามันเป็นอย่างไร นี่คือคำแนะนำทีละขั้นตอนของฉันโดยเริ่มจากโครงการ ASP.NET 4.5.2 MVC ใหม่ คู่มือนี้รวมถึงการจัดการแพ็คเกจฝั่งไคลเอ็นต์โดยใช้ bower แต่ไม่ (ยัง) ครอบคลุมการรวมกลุ่ม / ฮึดฮัด / อึก

ขั้นตอนที่ 1 (สร้างโครงการ)

สร้างโครงการ ASP.NET 4.5.2 ใหม่ (เทมเพลต MVC) ด้วย Visual Studio 2015

ขั้นตอนที่ 2 (ลบ Bundling / Optimization จาก Project)

ขั้นตอนที่ 2.1

ถอนการติดตั้ง Nuget Packages ต่อไปนี้:

• bootstrap
• Microsoft.jQuery.Unobstrusive.Validation
• jQuery.Validation
• jQuery
• Microsoft.AspNet.Web.Optimization
• WebGrease
• Antlr
• Modernizr
• ตอบกลับ

ขั้นตอนที่ 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และWebGreaseออกWeb.config

ขั้นตอนที่ 3 (เพิ่ม bower ในโครงการ)

ขั้นตอนที่ 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"
  }
}

แพ็คเกจ bower จะถูกติดตั้งโดยอัตโนมัติเมื่อpackage.jsonถูกบันทึก

ขั้นตอนที่ 4 (กำหนดค่า bower)

ขั้นตอนที่ 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>

ขั้นตอนที่ 6 (แก้ไขแหล่งข้อมูลอื่น)

ในมุมมองอื่น ๆ ทั้งหมดแทนที่

@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>

ลิงค์ที่มีประโยชน์

• http://idisposable.co.uk/2015/02/switching-the-client-side-build-library-in-visual-studio-2013-mvc-template-to-gulp-and-bower/
• http://www.baconapplications.com/running-bower-grunt-in-visual-studio-2013/
• http://devkimchi.com/1511/integrating-grunt-and-bower-with-visual-studio-2013/
• http://www.dotnetcurry.com/visualstudio/1096/using-grunt-gulp-bower-visual-studio-2013-2015
• http://andy-carter.com/blog/a-beginners-guide-to-package-manager-bower-and-using-gulp-to-manage-components
• http://www.jeffreyfritz.com/2015/05/where-did-my-asp-net-bundles-go-in-asp-net-5/

การรวมกลุ่มและการลดขนาด

ในความคิดเห็นด้านล่างLavaHotแนะนำให้ใช้ส่วนขยาย Bundler & Minifierแทน Bundler เริ่มต้นซึ่งฉันลบในขั้นตอนที่ 2 นอกจากนี้เขายังแนะนำบทความนี้เกี่ยวกับการรวมกลุ่มกับ Gulp

จริงๆแล้วมันไม่ต่างกันเกินไป เป็นเพียงการสนับสนุนที่ดีกว่าสำหรับสิ่งเหล่านี้ภายใน Visual Studio เช่นเมื่อคุณเพิ่มรายการใหม่คุณมีเทมเพลตสำหรับไฟล์กำหนดค่า bower หรือ npm นอกจากนี้คุณยังมีเทมเพลตสำหรับไฟล์คอนฟิกูเรชันอึกหรือฮึดฮัด
แต่การเรียกงานฮึดฮัด / อึกและผูกเข้ากับการสร้างเหตุการณ์นั้นยังคงทำได้ด้วย Task Runner Explorer เช่นเดียวกับใน VS 2013