Agrupamento e minificação sem ASP.NET MVC

É possível usar agregação e minificação de Microsoft.AspNet.Web.Optimization sem ter um projeto MVC?

Estou criando um site AngularJS comunicando-se com uma API REST. Para a API REST, estou usando a API da Web do ASP.NET. Eu também criei um “ASP.NET Empty Web Application”. Existem apenas arquivos HTML, js e CSS neste projeto (e um web.config). Eu gostaria que meus arquivos js e CSS fossem empacotados e minimizados, mas eu não quero criar um projeto MVC apenas para conseguir isso. É possível?

É absolutamente possível usar o empacotamento e a minimização em um projeto em branco.

  1. Use o Nuget para instalar o pacote: Install-Package Microsoft.AspNet.Web.Optimization
  2. Crie uma class BundleConfig e defina seus pacotes:

     using System.Web.Optimization; public class BundleConfig { public static void RegisterBundles(BundleCollection bundles) { bundles.Add(new ScriptBundle("~/bundles/js").Include( "~/Scripts/*.js")); bundles.Add(new StyleBundle("~/bundles/css").Include( "~/Styles/*.css")); } } 
  3. Registre a class BundleConfig no início do aplicativo no global.asax

     void Application_Start(object sender, EventArgs e) { BundleConfig.RegisterBundles(BundleTable.Bundles); } 
  4. faça referência aos pacotes em seu documento HTML.
  5. Ative o pacote desativando o modo de debugging.

Além das respostas dadas acima, gostaria de mencionar que houve um passo importante esquecido:

Depois de instalar o pacote NuGet para o Microsoft.AspNet.Web.Optimization e registrar os pacotes configuráveis no Global.asax (como explicado na resposta do Claies ), é necessário adicionar os methods de renderização para estilos e scripts da seguinte maneira:

 < %= Styles.Render("~/bundles/css") %> < %= Scripts.Render("~/bundles/MattsUIBundle/js") %> 

Isso precisa ser adicionado à seção head da página ASPX para renderizar os bundles “~ / bundles / js” e “~ / bundles / css” adicionados anteriormente à sua página. Sem isso, não aparecerá (veja por que preciso renderizar? ). Isso requer que você adicione

 < %@ Import Namespace="System.Web.Optimization" %> 

para a linha 2 da sua página, a fim de registrar o namespace, supondo que você já tenha adicionado o pacote NUGET Microsoft.AspNet.Web.Optimization ao seu código.

Se você quiser include mais arquivos relacionados, faça como

 void Application_Start() { BundleCollection bundles=BundleTable.Bundles; var jsMattsUIBundle = new ScriptBundle("~/bundles/MattsUIBundle/js"); jsMattsBundle.Include("~/Scripts/lib/jquery.min.js"); jsMattsBundle.Include("~/Scripts/lib/jquery-ui.custom.min.js"); jsMattsBundle.Include("~/Scripts/lib/jquery.watermark.min.js"); bundles.Add(jsMattsBundle); } 

ou mais simplesmente

  jsMattsBundle.Include("~/Scripts/lib/jquery.min.js", "~/Scripts/lib/jquery-ui.custom.min.js", "~/Scripts/lib/jquery.watermark.min.js"); 

Isso reunirá todos os 3 scripts sob o caminho virtual "~/bundles/MattsUIBundle/js" .


Importante: O pacote verificará se você está no modo de debugging ou no modo de liberação. As otimizações só se aplicam se você remover o sinalizador de debugging no web.config

  

ou se você definir explicitamente dentro do Application_Start você deseja otimizar, independentemente de estar no modo de debugging:

 BundleTable.EnableOptimizations = true; 

Da mesma forma, se você estiver usando o suporte a CDN , ative-o via

 BundleTable.Bundles.UseCdn = true; //enable CDN support 

que lhe permitirá declarar

 var jqueryCdnPath = "http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js"; BundleTable.Bundles.Add(new ScriptBundle("~/bundles/jquery", jqueryCdnPath).Include("~/Scripts/jquery-{version}.js")); 

Observe que o CDN será usado apenas no modo de liberação. O script a seguir garante que uma cópia local do jQuery seja carregada se o carregamento do CDN falhar:

  < %= Scripts.Render("~/bundles/jquery") %>  

assumindo que você está fornecendo uma cópia local do jQuery 1.7.1 em "~/Scripts" .


Nota: Na renderização de syntax do MVC Razor, a renderização é feita da seguinte maneira:

 @Scripts.Render("~/bundles/MattsUIBundle/js") @Styles.Render("~/bundles/css") 

Mais informações podem ser encontradas aqui.

Para obter velocidade de carregamento de arquivos em seu SPA, você precisa de tempo manual na configuração. A resposta errada é implementar o Razor, especialmente se seu objective era ficar longe do MVC e de seus amigos (o que é bom se o seu objective for um SPA do AngularJS). Quando você implementa a estrutura de otimização mencionada em outras respostas, agora você precisa pressionar o Mecanismo de exibição para criar arquivos CSHTML, o que é um impacto notável em sua velocidade, provavelmente mais do que você acha que está salvando.

Então, como eu disse, você precisaria de tempo de desenvolvedor para minimizar os arquivos. Você teria que enviá-los manualmente para um CDN que você possui (ou precisa configurar). Você pode, então, referenciar seu próprio CDN com seus próprios pacotes, conforme configurado por sua equipe, e esse CDN será armazenado em cache pelos navegadores do usuário.

Então, quando um ou mais de seus SPAs precisarem apontar para HTML / CSS / JS atualizado, você incrementará a versão CDN nesse Aplicativo SPA. Outros aplicativos do SPA podem permanecer iguais com uma versão antiga (embora eu recomende tentar manter os CDNs de versões mais recentes). E os navegadores do usuário reconhecerão a nova versão do CDN e puxarão uma nova versão para o cache.

@Matt, na verdade você não precisa adicionar

 < %@ Import Namespace="System.Web.Optimization" %> < %= Styles.Render("~/bundles/css") %> < %= Scripts.Render("~/bundles/MattsUIBundle/js") %> 

E você não precisa usar o modelo CSHTML. Você pode fazer referência aos seus bundles dessa maneira a partir de uma página html:

   

Ele salvará sua página do View Engine.

Você pode usar o YUI ou o Google Clouser Mapper

Este é o exemplo de como usuário YUI com o Visual Studio

http://peronnemyr.wordpress.com/2012/09/26/using-yui-compressor-for-net-integrated-to-builds-in-visual-studio-2010/

Este link tem extensões do Visual Studio http://visualstudiogallery.msdn.microsoft.com/5469b7e2-90d7-4f54-b299-ae47e26323e6

Você pode Usuário JSMIN http://www.crockford.com/javascript/jsmin.html

Você pode executar o JsMin como Post Build Event como abaixo jsmin < "$ (ProjectDir) \ debug.js"> “$ (ProjectDir) \ min.js”

Este é o link como executar JSMIN http://jasonfaulkner.com/RunJSMinInVisualStudio.aspx

Se isso respondeu a sua pergunta, por favor, verifique à direita no lado esquerdo.

Você também pode usar a extensão WebEssentials do VS extention que pode minimizar seus arquivos js / css independentemente da compilation do projeto (para que você não precise de nenhuma dependência de dll de terceiros). Tem empacotando também, muito conveniente.