Meskipun jawaban Liviu Costea benar, saya masih butuh waktu cukup lama untuk mencari tahu bagaimana hal itu sebenarnya dilakukan. Jadi, inilah panduan langkah demi langkah saya mulai dari proyek ASP.NET 4.5.2 MVC baru. Panduan ini mencakup manajemen paket sisi klien menggunakan bower tetapi tidak (belum) mencakup bundling / grunt / gulp.
Langkah 1 (Buat Proyek)
Buat proyek ASP.NET 4.5.2 baru (MVC Template) dengan Visual Studio 2015.
Langkah 2 (Hapus Bundling / Optimasi dari Proyek)
Langkah 2.1
Copot Pemasangan Paket Nuget berikut ini:
- bootstrap
- Microsoft.jQuery.Unobstrusive.Validation
- jQuery.Validation
- jQuery
- Microsoft.AspNet.Web.Optimization
- WebGrease
- Antlr
- Modernizr
- Menanggapi
Langkah 2.2
Hapus App_Start\BundleConfig.csdari proyek.
Langkah 2.3
Menghapus
using System.Web.Optimization;
dan
BundleConfig.RegisterBundles(BundleTable.Bundles);
dari Global.asax.cs
Langkah 2.4
Menghapus
<add namespace="System.Web.Optimization"/>
dari Views\Web.config
Langkah 2.5
Hapus Binding Majelis untuk System.Web.Optimizationdan WebGreasedariWeb.config
Langkah 3 (Tambahkan punjung ke Proyek)
Langkah 3.1
Tambahkan package.jsonfile baru ke proyek ( NPM configuration filetemplate item)
Langkah 3.2
Tambahkan bowerke devDependencies:
{
"version": "1.0.0",
"name": "ASP.NET",
"private": true,
"devDependencies": {
"bower": "1.4.1"
}
}
Paket bower otomatis terinstal saat package.jsondisimpan.
Langkah 4 (Konfigurasi bower)
Langkah 4.1
Tambahkan bower.jsonfile baru ke proyek ( Bower Configuration filetemplate item)
Langkah 4.2
Menambahkan bootstrap, jquery-validation-unobtrusive, modernizrdan responddependensi:
{
"name": "ASP.NET",
"private": true,
"dependencies": {
"bootstrap": "*",
"jquery-validation-unobtrusive": "*",
"modernizr": "*",
"respond": "*"
}
}
Paket-paket ini dan dependensinya secara otomatis diinstal ketika bower.json disimpan.
Langkah 5 (Modifikasi Views\Shared\_Layout.cshtml)
Langkah 5.1
Menggantikan
@Styles.Render("~/Content/css")
dengan
<link rel="stylesheet" href="~/wwwroot/lib/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="~/Content/Site.css" />
Langkah 5.2
Menggantikan
@Scripts.Render("~/bundles/modernizr")
dengan
<script src="~/wwwroot/lib/modernizr/modernizr.js" ></script>
Langkah 5.3
Menggantikan
@Scripts.Render("~/bundles/jquery")
dengan
<script src="~/wwwroot/lib/jquery/dist/jquery.min.js"></script>
Langkah 5.4
Menggantikan
@Scripts.Render("~/bundles/bootstrap")
dengan
<script src="~/wwwroot/lib/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="~/wwwroot/lib/respond/dest/respond.min.js"></script>
Langkah 6 (Ubah sumber lain)
Di semua Tampilan lainnya, ganti
@Scripts.Render("~/bundles/jqueryval")
dengan
<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>
Tautan Berguna
Bundling & Minifying
Dalam komentar di bawah ini, LavaHot merekomendasikan ekstensi Bundler & Minifier sebagai pengganti bundler default yang saya hapus pada langkah 2. Dia juga merekomendasikan artikel ini tentang bundling dengan Gulp.
bower.jsonfile melalui Visual Studio 2015, itu akan secara otomatis membuatbowerrcfile juga, yang menimpa lokasi default untuk instalasi bower daribower_componentskewwwroot/libSebenarnya tidak terlalu berbeda. Hanya saja ada dukungan yang lebih baik untuk semua ini di dalam Visual Studio, misalnya ketika Anda menambahkan item baru, Anda memiliki templat untuk file konfigurasi bower atau npm. Anda juga memiliki template untuk file konfigurasi gulp atau grunt.
Tetapi sebenarnya memanggil tugas grunt / gulp dan mengikatnya untuk membangun acara masih dilakukan dengan Task Runner Explorer, seperti di VS 2013.
sumber