2012-03-01 19 views
13

Ho provato la nuova funzionalità di aggregazione e raggruppamento in ASP.NET MVC 4 e funziona benissimo fintanto che si utilizzano le convenzioni delle cartelle predefinite per i file css e js.Ottimizzazione ASP.NET - Bundle

/Content 
/Scripts 

Io di solito mettere CSS e script in una cartella chiamata statico come questo

/Static/Css 
/Static/Js 

Ho provato a registrare i miei pacchetti come questo:

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

E in

Global.ascx.cs 

Ho fatto questo:

BundleTable.Bundles.RegisterScriptsAndCss(); 

Il markup generato assomiglia a questo:

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

tuttavia è non funziona, la richiesta è simile al seguente:

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

Che cosa sto facendo di sbagliato?

Aggiornamento

penso di essere stato finalmente in grado di risolvere questo nel modo seguente:

  1. Rimozione del AddDirectory chiama bootstrapCss.AddDirectory("~/Static/Css", "*.css");

  2. Dare i percorsi fasci che non riflettono la struttura della directory reale

+1

Cosa intendi con il n. 2 "Assegnare i percorsi dei pacchetti che non riflettono la reale struttura di directory"? – CallMeLaNN

+0

Se hai una struttura di directory come questa/scripts/app non dovresti usare quel percorso nel bundle ("~/scripts/app "). O almeno ho avuto qualche problema a farlo in mvc 4 rc. Perhap s che non è più un problema. – Pelle

+0

Ciao, hai qualche indizio su quale spazio dei nomi mi manca? non sto ottenendo Addfile o AddDirectory in bootstrapcss. ? – Sakthivel

risposta

4

se fatto questo alcuni giorni fa e ha funzionato bene. Ho creato una cartella denominata Helper e quindi ho creato una nuova classe chiamata CssJsBuilder.

mia classe si presenta così:

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

Dopo di che. Vai a Global.asax:

  1. Rimuovere o commentare BundleTable.Bundles.RegisterTemplateBundles()
  2. Aggiungere CssJsBuilder.Initializing() Metodo Application_Start().
  3. Ricrea il progetto e quindi riavvialo.

Spero che questo funzioni anche per te.

2

In Global.asax.cs sostituire

BundleTable.Bundles.RegisterTemplateBundles();

con

BundleTable.Bundles.EnableDefaultBundles();

0

Ecco come ha funzionato per me.

Questo è semplificato versione che uso solo default.aspx file non è Global.asax (Potete, se volete)

In questo esempio io uso 2 directory Content2 e Scripts2

in Content2 ho 2 file CSS uno per class = "naziv" e altri per class = "naziv2"

in Scripts2 ci sono 2 file uno con funzione di f1) definizione (e altri con f2() definitio n

nella directory/bin dovrebbe esserci 3 file:

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

Quello che stai facendo "sbagliato" è che il tuo percorso di raggruppamento corrisponde a un percorso REALE. A quanto ho capito, quando arriva la richiesta di "/ Static/Css? V = D9JdmLZFFwjRwraNKfA1uei_YMoBoqLf-gFc0zHivM41", il motore di routing cerca prima un percorso fisico. Trova una corrispondenza con la cartella "statica" e cerca di trovare un file che corrisponda a "Css? V = D9JdmLZFFwjRwraNKfA1uei_YMoBoqLf-gFc0zHivM41". Quando non riesce a trovarne uno, perché non esiste, dà un 404. (Ho anche visto un accesso negato.) Quando il motore di routing non riesce a trovare un percorso fisico, allora guarda ad altri gestori come raggruppamento e minificazione per soddisfare la richiesta.

Comunque penso che tu abbia capito dai tuoi commenti, ma non sono sicuro che sarà chiaro a chiunque trovi la tua domanda. Basta cambiare la tua registrazione da:

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

a:

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

Se fate questo cambiamento, il problema andrà via, (concesso non v'è alcun percorso fisico che corrisponde a "fasci"

.
Problemi correlati