Aggiunta del nuovo framework di ottimizzazione Web ASP.NET ai progetti MVC4 dopo averli aggiornati manualmente

Question

Dopo l'aggiornamento manuale di un progetto MVC ASP.NET su MVC4 using these instructions, come impostare quindi le nuove funzionalità CSS e JavaScript di raggruppamento e minimizzazione delle risorse del ASP.NET Web Optimization Framework in MVC4? I modelli predefiniti hanno tutto questo impostato, ma come lo fai a mano?

Answer 1

• tasto destro del mouse Riferimenti quindi gestire i pacchetti NuGet e aggiungere “Microsoft.AspNet.Web.Optimization” (o tipo Install-Package Microsoft.AspNet.Web.Optimization nella console NuGet).
• Nel file Web.config, aggiungere quanto segue a <system.webServer>, consentendo la pubblicazione dei pacchetti con URL senza estensione.

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

• Nella cartella App_Start, aggiungere una nuova classe chiamata BundleConfig.cs. Esso dovrebbe essere simile a questo:

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")); 
     } 
    } 
} 

• Modificare il precedente per aggiungere lo script e fogli di stile fasci si richiede quindi aggiungere le seguenti righe alla sezione utilizzando e Application_Start in Global.asax.cs:

//using section 
using System.Web.Optimization; 

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

• Sostituisci il tuo CSS e JavaScript e tag in _Layout.cshtml con chiamate a @Styles.Render("~/Content/css") e @Scripts.Render("~/bundles/jquery"), sosti ng i parametri con i nomi dei bundle che hai aggiunto a BundleConfig.cs. Assicurati di non nominare nessuno dei pacchetti uguale alle cartelle del tuo progetto.

Ora dovrebbe essere tutto a posto - leggere su come usare la piena featureset qui: http://www.asp.net/mvc/overview/performance/bundling-and-minification

Answer 2

Sì, procedere come segue per fascio e minify JS e CSS:

• Prima aperto console di gestione pacchetti ed esegui il comando, seleziona la tua app web come progetto.

Installare-Pacchetto Microsoft.AspNet.Web.Optimization

• Vai global.asax tasto destro del mouse e il codice di vista

• Incollare il codice qui sotto:

  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); 
  } 
  

• Chiamalo in Application_Start()

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

• Vai alla _Layout.cshtml in Vista/shared

• aggiungere la riga in testa

  @ ViewBag.Title - Il mio applicazioni ASP.NET @Styles.Render ("~/fasci/customCSSBundle")

• Aggiungere questo prima della chiusura del tag body

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

• Nel web.config se si imposta compilation debug = true, non saranno in bundle file. Se lo si imposta come falso, i file verranno raggruppati.