2012-03-01 21 views
13

He estado probando la nueva función de minificación y agrupación en ASP.NET MVC 4, y funciona muy bien siempre que utilice las convenciones de carpeta predeterminadas para archivos css y js.Optimización de ASP.NET - Inclusión de

/Content 
/Scripts 

generalmente pongo CSS y la escritura en una carpeta llamada estático como sigue

/Static/Css 
/Static/Js 

traté de registrar mis propios paquetes de la siguiente manera:

public static class BundleCollectionExtensions 
{ 
    public static void RegisterScriptsAndCss(this BundleCollection bundles) 
    { 
     var bootstrapCss = new Bundle("~/Static/Css", new CssMinify()); 
     bootstrapCss.AddDirectory("~/Static/Css", "*.css"); 
     bootstrapCss.AddFile("~/Static/Css/MvcValidation.css"); 
     bootstrapCss.AddFile("~/Static/Css/bootstrap-responsive.min.css"); 
     bootstrapCss.AddFile("~/Static/Css/bootstrap.min.css"); 

     bundles.Add(bootstrapCss); 

     var bootstrapJs = new Bundle("~/Static/Js", new JsMinify()); 
     bootstrapJs.AddDirectory("~/Static/Js", "*.js"); 
     bootstrapJs.AddFile("~/Static/Js/jquery-1.7.1.min.js"); 
     bootstrapJs.AddFile("~/Static/Js/jquery.validate.min.js"); 
     bootstrapJs.AddFile("~/Static/Js/jquery.validate.unobtrusive.min.js"); 
     bootstrapJs.AddFile("~/Static/Js/bootstrap.min.js"); 
     bootstrapJs.AddFile("~/Static/Js/gunsforhire.js"); 

     bundles.Add(bootstrapJs); 
    } 
} 

Y en

Global.ascx.cs 

Lo hice:

BundleTable.Bundles.RegisterScriptsAndCss(); 

El marcado generado se parece a esto:

<link href="/Static/Css?v=D9JdmLZFFwjRwraNKfA1uei_YMoBoqLf-gFc0zHivM41" rel="stylesheet" type="text/css" /> 

<script src="/Static/Js?v=mbKbf5__802kj-2LS5j9Ba-wvSxBCKNMQGBgzou6iZs1" type="text/javascript"></script> 

Sin embargo, es no funciona, la solicitud es el siguiente:

Request URL:http://localhost:49603/Static/Js?v=mbKbf5__802kj-2LS5j9Ba-wvSxBCKNMQGBgzou6iZs1 
Request Method:GET 
Status Code:301 Moved Permanently (from cache) 
Query String Parametersview URL encoded 
v:mbKbf5__802kj-2LS5j9Ba-wvSxBCKNMQGBgzou6iZs1 

Request URL:http://localhost:49603/Static/Js/?v=mbKbf5__802kj-2LS5j9Ba-wvSxBCKNMQGBgzou6iZs1 
Request Method:GET 
Status Code:404 Not Found 
Request Headersview source 
Accept:*/* 
Accept-Charset:ISO-8859-1,utf-8;q=0.7,*;q=0.3 
Accept-Encoding:gzip,deflate,sdch 
Accept-Language:en-US,en;q=0.8 
Connection:keep-alive 
Host:localhost:49603 
Referer:http://localhost:49603/ 
User-Agent:Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/535.11 (KHTML, like Gecko)  Chrome/17.0.963.56 Safari/535.11 
Query String Parametersview URL encoded 
v:mbKbf5__802kj-2LS5j9Ba-wvSxBCKNMQGBgzou6iZs1 
Response Headersview source 
Cache-Control:private 
Content-Length:4757 
Content-Type:text/html; charset=utf-8 
Date:Thu, 01 Mar 2012 19:05:44 GMT 
Server:Microsoft-IIS/7.5 
X-Powered-By:ASP.NET 
X-SourceFiles:=?UTF-8?B? QzpcQENvZGVccGVsbGVccGVsbGVoZW5yaWtzc29uLnNlXHNyY1xXZWJcU3RhdGljXEpzXA==?= 

¿Qué estoy haciendo mal?

actualización

Creo que finalmente fue capaz de resolver este haciendo lo siguiente:

  1. Extracción de la addDirectory llamadas bootstrapCss.AddDirectory("~/Static/Css", "*.css");

  2. Dar los caminos bundles que no reflejan la estructura de directorio real

+1

¿Qué quiere decir con el no 2 "Dando a los paquetes las rutas que no reflejan la estructura del directorio real"? – CallMeLaNN

+0

Si tiene una estructura de directorios como esta/scripts/app, no debería usar esa ruta en el paquete ("~/scripts/app "). O al menos tuve algunos problemas para hacerlo en el mvc 4 rc. Perhap s eso ya no es un problema. – Pelle

+0

Hola, ¿tienes alguna pista sobre el espacio de nombres que me falta? No obtengo Addfile o AddDirectory en bootstrapcss. ? – Sakthivel

Respuesta

4

si hace esto hace unos días y funcionó bien. Creé una carpeta llamada Helper y luego creé una nueva clase llamada CssJsBuilder.

mi clase es el siguiente:

public static void Initializing() 
{ 
    IBundleTransform jstransformer; 
    IBundleTransform csstransformer; 

#if DEBUG 
      jstransformer = new NoTransform("text/javascript"); 
      csstransformer = new NoTransform("text/css"); 
#else 
     jstransformer = new JsMinify(); 
     csstransformer = new CssMinify(); 
#endif 

      var bundle = new Bundle("~/Scripts/js", jstransformer); 

      bundle.AddFile("~/Scripts/jquery-1.6.2.js", true); 
      bundle.AddFile("~/Scripts/jquery-ui-1.8.11.js", true); 
      bundle.AddFile("~/Scripts/jquery.validate.unobtrusive.js", true); 
      bundle.AddFile("~/Scripts/jquery.unobtrusive-ajax.js", true); 
      bundle.AddFile("~/Scripts/jquery.validate.js", true); 
      bundle.AddFile("~/Scripts/modernizr-2.0.6-development-only.js", true); 
      bundle.AddFile("~/Scripts/AjaxLogin.js", true); 
      bundle.AddFile("~/Scripts/knockout-2.0.0.debug.js", true); 
      bundle.AddFile("~/Scripts/bootstrap.js", true); 
      bundle.AddFile("~/Scripts/dungeon.custom.js", true); 

      BundleTable.Bundles.Add(bundle); 

      bundle = new Bundle("~/Content/css", csstransformer); 

      bundle.AddFile("~/Content/bootstrap-responsive.css", true); 
      bundle.AddFile("~/Content/bootstrap.css", true); 

      BundleTable.Bundles.Add(bundle); 

      bundle = new Bundle("~/Content/themes/base/css", csstransformer); 

      bundle.AddFile("~/Content/themes/base/jquery.ui.core.css", true); 
      bundle.AddFile("~/Content/themes/base/jquery.ui.resizable.css", true); 
      bundle.AddFile("~/Content/themes/base/jquery.ui.selectable.css", true); 
      bundle.AddFile("~/Content/themes/base/jquery.ui.accordion.css", true); 
      bundle.AddFile("~/Content/themes/base/jquery.ui.autocomplete.css", true); 
      bundle.AddFile("~/Content/themes/base/jquery.ui.button.css", true); 
      bundle.AddFile("~/Content/themes/base/jquery.ui.dialog.css", true); 
      bundle.AddFile("~/Content/themes/base/jquery.ui.slider.css", true); 
      bundle.AddFile("~/Content/themes/base/jquery.ui.tabs.css", true); 
      bundle.AddFile("~/Content/themes/base/jquery.ui.datepicker.css", true); 
      bundle.AddFile("~/Content/themes/base/jquery.ui.progressbar.css", true); 
      bundle.AddFile("~/Content/themes/base/jquery.ui.theme.css", true); 

      BundleTable.Bundles.Add(bundle); 
     } 

Después de eso. Ir a Global.asax:

  1. quite o comentario BundleTable.Bundles.RegisterTemplateBundles()
  2. Añadir CssJsBuilder.Initializing() al Método Application_Start().
  3. Recreate Project y vuelve a iniciarlo.

Espero que esto funcione para usted también.

2

En Global.asax.cs reemplazar

BundleTable.Bundles.RegisterTemplateBundles();

con

BundleTable.Bundles.EnableDefaultBundles();

0

Así es como funcionó para mí.

Esta versión se simplifica Yo sólo uso default.aspx archivo sin Global.asax (Puede que si quieres)

En este ejemplo utilizo 2 directorios Content2 y Scripts2

en Content2 tengo 2 archivos css uno de class = "naziv" y otros de clase = "naziv2"

en Scripts2 hay 2 archivos uno con la función f1 definición() y otras con f2() definitio n

en el directorio/bin debe haber 3 archivos:

Microsoft.Web.Infrastructure.dll, System.Web.Optimization.dll, WebGrease.dll

<%@ Page Title="Home Page" Language="vb" debug="true"%> 
<%@ Import namespace="System.Web.Optimization" %> 

<script runat="server" > 
    Sub Page_Load(sender As Object, e As EventArgs) 
     System.Web.Optimization.BundleTable.EnableOptimizations = True ''true will force optimization even if debug=true 

     Dim siteCssBundle = New StyleBundle("~/Content2/css") 
     siteCssBundle.IncludeDirectory("~/Content2", "*.css") 
     BundleTable.Bundles.Add(siteCssBundle) 

     Dim siteJsBundle = New ScriptBundle("~/Scripts2/js") 
     siteJsBundle.IncludeDirectory("~/Scripts2", "*.js") 
     BundleTable.Bundles.Add(siteJsBundle) 
    End Sub 
</script> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
    <head> 
    </head> 
    <body onload="f1(); f2();"> 
     <%: Styles.Render("~/Content2/css")%> 
     <%: Scripts.Render("~/Scripts2/js")%> 
     <br /> 
     <span class="naziv">Span 1</span> <br /> 
     <span class="naziv2">Span 2</span> <br /> 
    </body> 
</html> 
7

Lo que está haciendo "mal" es que su ruta de paquete corresponde a una ruta REAL. Según tengo entendido, cuando entra la solicitud de "/ Static/Css? V = D9JdmLZffwjRwraNKfA1uei_YMoBoqLf-gFc0zHivM41", el motor de enrutamiento busca primero una ruta física. Encuentra una coincidencia con su carpeta "estática" e intenta encontrar un archivo que coincida con "Css? V = D9JdmLZFFwjRwraNKfA1uei_YMoBoqLf-gFc0zHivM41". Cuando no puede encontrar uno, porque no existe, da un 404. (También he visto un acceso denegado). Cuando el motor de enrutamiento no puede encontrar una ruta de archivo física, busca a otros controladores como agrupación y minificación para atender la solicitud.

De todos modos creo que lo has entendido por tus comentarios, pero no estoy seguro de que quede muy claro para cualquiera que encuentre tu pregunta. Basta con cambiar su registro a partir de:

var bootstrapCss = new Bundle("~/Static/Css", new CssMinify()); 

a:

var bootstrapCss = new Bundle("~/bundles/Css", new CssMinify()); 

Si usted hace que el cambio, el problema va a desaparecer, (concedidas no hay un camino físico que corresponde a "paquetes"

.