Mặc dù câu trả lời của Liviu Costea là đúng, nhưng tôi vẫn mất một khoảng thời gian để tìm ra cách nó thực sự được thực hiện. Vì vậy, đây là hướng dẫn từng bước của tôi bắt đầu từ một dự án ASP.NET 4.5.2 MVC mới. Hướng dẫn này bao gồm quản lý gói phía máy khách bằng cách sử dụng bower nhưng chưa (chưa) bao gồm việc đóng gói / grunt / gulp.
Bước 1 (Tạo dự án)
Tạo một dự án ASP.NET 4.5.2 mới (Mẫu MVC) với Visual Studio 2015.
Bước 2 (Xóa Gói / Tối ưu hóa khỏi Dự án)
Bước 2.1
Gỡ cài đặt các Gói Nuget sau:
- bootstrap
- Microsoft.jQuery.Unobstrusive.Validation
- jQuery.Validation
- jQuery
- Microsoft.AspNet.Web.Optimization
- WebGrease
- Antlr
- Modernizr
- Trả lời
Bước 2.2
Xóa App_Start\BundleConfig.cskhỏi dự án.
Bước 2.3
Tẩy
using System.Web.Optimization;
và
BundleConfig.RegisterBundles(BundleTable.Bundles);
từ Global.asax.cs
Bước 2.4
Tẩy
<add namespace="System.Web.Optimization"/>
từ Views\Web.config
Bước 2.5
Loại bỏ các ràng buộc lắp ráp cho System.Web.Optimizationvà WebGreasekhỏiWeb.config
Bước 3 (Thêm bower vào dự án)
Bước 3.1
Thêm package.jsontệp mới vào dự án ( NPM configuration filemẫu mục)
Bước 3.2
Thêm bowervào devDependencies:
{
"version": "1.0.0",
"name": "ASP.NET",
"private": true,
"devDependencies": {
"bower": "1.4.1"
}
}
Gói bower được tự động cài đặt khi package.jsonđược lưu.
Bước 4 (Định cấu hình bower)
Bước 4.1
Thêm bower.jsontệp mới vào dự án ( Bower Configuration filemẫu mục)
Bước 4.2
Thêm bootstrap, jquery-validation-unobtrusive, modernizrvà respondđể phụ thuộc:
{
"name": "ASP.NET",
"private": true,
"dependencies": {
"bootstrap": "*",
"jquery-validation-unobtrusive": "*",
"modernizr": "*",
"respond": "*"
}
}
Các gói này và các gói phụ thuộc của chúng được tự động cài đặt khi bower.jsonđược lưu.
Bước 5 (Sửa đổi Views\Shared\_Layout.cshtml)
Bước 5.1
Thay thế
@Styles.Render("~/Content/css")
với
<link rel="stylesheet" href="~/wwwroot/lib/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="~/Content/Site.css" />
Bước 5.2
Thay thế
@Scripts.Render("~/bundles/modernizr")
với
<script src="~/wwwroot/lib/modernizr/modernizr.js" ></script>
Bước 5.3
Thay thế
@Scripts.Render("~/bundles/jquery")
với
<script src="~/wwwroot/lib/jquery/dist/jquery.min.js"></script>
Bước 5.4
Thay thế
@Scripts.Render("~/bundles/bootstrap")
với
<script src="~/wwwroot/lib/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="~/wwwroot/lib/respond/dest/respond.min.js"></script>
Bước 6 (Sửa đổi các nguồn khác)
Trong tất cả các Chế độ xem khác thay thế
@Scripts.Render("~/bundles/jqueryval")
với
<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>
Liên kết hữu ích
Bó & Thu nhỏ
Trong phần nhận xét bên dưới, LavaHot đề xuất phần mở rộng Bundler & Minifier để thay thế cho gói mở rộng mặc định mà tôi đã xóa ở bước 2. Anh ấy cũng đề xuất bài viết này về cách đóng gói với Gulp.