Yeni ASP.NET Web Optimizasyon çerçevesini, el ile yükselttikten sonra MVC4 projelerine ekleme

Question

Bir ASP.NET MVC projesini MVC4 using these instructions'a el ile yeni sürüme geçirdikten sonra, yeni CSS ve JavaScript varlık kümeleme ve küçültme özelliklerini nasıl kurarsınız? MVC4 ASP.NET Web Optimizasyon Çerçevesi? Varsayılan şablonlar bunların hepsine sahiptir, ancak bunu elle nasıl yapıyorsunuz?

Answer 1

• sağ tıklayın Referansları sonra Nuget Paketleri Yönetin ve “Microsoft.AspNet.Web.Optimization” ekleyin (veya Nuget konsoluna Install-Package Microsoft.AspNet.Web.Optimization yazın).
• Web.config dosyasında, küçültülmüş paketlerin uzantısı olmayan URL'lerle sunulmasına izin vermek için aşağıdakini <system.webServer>'a ekleyin. senin App_Start klasöründe

  <handlers> 
  <remove name="ExtensionlessUrlHandler-ISAPI-4.0_32bit" /> 
  <remove name="ExtensionlessUrlHandler-ISAPI-4.0_64bit" /> 
  <remove name="ExtensionlessUrlHandler-Integrated-4.0" /> 
  <add name="ExtensionlessUrlHandler-ISAPI-4.0_32bit" path="*." verb="GET,HEAD,POST,DEBUG,PUT,DELETE,PATCH,OPTIONS" modules="IsapiModule" scriptProcessor="%windir%\Microsoft.NET\Framework\v4.0.30319\aspnet_isapi.dll" preCondition="classicMode,runtimeVersionv4.0,bitness32" responseBufferLimit="0" /> 
  <add name="ExtensionlessUrlHandler-ISAPI-4.0_64bit" path="*." verb="GET,HEAD,POST,DEBUG,PUT,DELETE,PATCH,OPTIONS" modules="IsapiModule" scriptProcessor="%windir%\Microsoft.NET\Framework64\v4.0.30319\aspnet_isapi.dll" preCondition="classicMode,runtimeVersionv4.0,bitness64" responseBufferLimit="0" /> 
  <add name="ExtensionlessUrlHandler-Integrated-4.0" path="*." verb="GET,HEAD,POST,DEBUG,PUT,DELETE,PATCH,OPTIONS" type="System.Web.Handlers.TransferRequestHandler" preCondition="integratedMode,runtimeVersionv4.0" /> 
  </handlers> 
  
, yeni sınıf denilen BundleConfig.cs ekleyin. : Senaryo ve stil paketleri daha sonra Global.asax.cs kullanarak bölümü ve Application_Start aşağıdaki satırları ekleyin gerektiren eklemek için

using System.Web; 
using System.Web.Optimization; 

namespace MvcApplication1 
{ 
    public class BundleConfig 
    { 
     // For more information on Bundling, visit http://go.microsoft.com/fwlink/?LinkId=254725 
     public static void RegisterBundles(BundleCollection bundles) 
     { 
      bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
       "~/Scripts/jquery-{version}.js")); 

      bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
       "~/Scripts/jquery-ui-{version}.js")); 

      bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
       "~/Scripts/jquery.unobtrusive*", 
       "~/Scripts/jquery.validate*")); 

      // Use the development version of Modernizr to develop with and learn from. Then, when you're 
      // ready for production, use the build tool at http://modernizr.com to pick only the tests you need. 
      bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
         "~/Scripts/modernizr-*")); 

      bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/site.css")); 

      bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
         "~/Content/themes/base/jquery.ui.core.css")); 
     } 
    } 
} 

• Düzenleme yukarıda: Bu gibi görünmelidir

//using section 
using System.Web.Optimization; 

//Application_Start 
BundleConfig.RegisterBundles(BundleTable.Bundles); 

• @Styles.Render("~/Content/css") ve @Scripts.Render("~/bundles/jquery"), değişme çağrıları _Layout.cshtml da CSS ve JavaScript ve etiketleri değiştirin parametreleri, BundleConfig.cs dosyasına eklediğiniz paketlerin adlarıyla birlikte. Projenizdeki klasörler ile aynı olan demetleri herhangi birine isim vermeyin.

Artık tüm set olmalıdır - Tam burada featureset nasıl kullanılacağı hakkında okumak: http://www.asp.net/mvc/overview/performance/bundling-and-minification

Answer 2

Evet aşağıdaki adımları paketlemek için izleyin ve küçültmek JS ve CSS:

• İlk açık paket yöneticisi konsolu ve komutu çalıştırın, web uygulamanızı proje olarak seçin.

yükleyin-Paket Microsoft.AspNet.Web.Optimization

• Git Yapıştır aşağıdaki kodu sağ tıklayın ve görünümü kodunu

• Global.asax için:

  public static void MinifyJavaScriptAndCSS() 
  { 
      var scripts1 = new ScriptBundle("~/bundles/customJSBundle"); 
      scripts1.Include("~/Scripts/script1.js"); 
      scripts1.Include("~/Scripts/script2.js"); 
      BundleTable.Bundles.Add(scripts1); 
  
      //Bundle Css 
      var css1 = new StyleBundle("~/bundles/customCSSBundle"); 
      css1.Include("~/Styles/style1.css"); 
      css1.Include("~/Styles/style2.css"); 
      BundleTable.Bundles.Add(css1); 
  } 
  

• Bunu, Application_Start()

  numaralı telefondan arayın. Benim ASP.NET Uygulama @Styles -

  protected void Application_Start() 
  { 
      ApplicationHelper.MinifyJavaScript(); 
  } 
  

• Go

• ViewBag.Title @ kafasına

  yılında satırı ekleyin Shared/Görüntüleme _Layout.cshtml için.Eğer derleme hata ayıklama = true ayarlarsanız web.config olarak vücut etiketi

  //your code 
      @Scripts.Render("~/bundles/customJSBundle") 
  </body> 
  

• kapanmasından önce ("~/paketleri/customCSSBundle")

• Bunu ekle Render, dosyalar paketlenmiş edilmeyecektir. Bunu false olarak ayarlarsanız, dosyalar paketlenecektir.