Добавление новой платформы ASP.NET Web Optimization в проекты MVC4 после их обновления вручную

Question

После того, как вы вручную обновите проект ASP.NET MVC до MVC4 с помощью этих инструкций, как настроить новые функции связывания и минимизации ресурсов CSS и JavaScript в ASP.NET Web Optimization Framework в MVC4? В шаблонах по умолчанию все это настроено, но как вы делаете это вручную?

Answer 1

• Щелкните правой кнопкой мыши на References, затем управляйте пакетами NuGet и добавьте "Microsoft.AspNet.Web.Optimization" (или введите Install-Package Microsoft.AspNet.Web.Optimization в консоль NuGet).
• В вашем файле Web.config добавьте следующее <system.webServer>, позволяя минимизированным пакетам обслуживаться с URL без расширений.

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

• В папке App_Start добавьте новый класс с именем BundleConfig.cs. Это должно выглядеть примерно так:

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

• Отредактируйте вышеупомянутое, чтобы добавить требуемые пакеты скриптов и таблиц стилей, затем добавьте следующие строки в раздел using и Application_Start в Global.asax.cs:

//using section
using System.Web.Optimization;

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

• Замените ваши CSS и JavaScript и теги в _Layout.cshtml на вызовы @Styles.Render("~/Content/css") а также @Scripts.Render("~/bundles/jquery"), заменив параметры именами пакетов, которые вы добавили в BundleConfig.cs. Убедитесь, что ни один из пакетов не назван так же, как папки в вашем проекте.

Теперь вы должны быть полностью готовы - прочитайте о том, как использовать полный набор функций здесь: http://www.asp.net/mvc/overview/performance/bundling-and-minification

Answer 2

Да Выполните следующие шаги для объединения и минимизации JS и CSS:

• Сначала откройте консоль диспетчера пакетов и выполните команду, выберите свое веб-приложение в качестве проекта.

Инсталляционный пакет Microsoft.AspNet.Web.Optimization

• Зайдите на global.asax правой кнопкой мыши и просмотрите код

• Вставьте следующий код:

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

• Вызовите это в Application_Start()

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

• Перейдите на _Layout.cshtml в представлении / общий доступ

• Добавьте строку в голову

  @ViewBag.Title - My ASP.NET Application @Styles.Render("~/bundles/customCSSBundle")

• Добавьте это перед закрытием тега body

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

• В файле web.config, если вы установите компиляцию debug = true, файлы не будут объединяться. Если вы установите его как false, файлы будут объединены.