2012-03-01 69 views
13

我一直在ASP.NET MVC 4中嘗試使用新的縮小和綁定功能,只要您使用默認的文件夾約定爲css和js文件,它就會很好地工作。ASP.NET優化 - 捆綁

/Content 
/Scripts 

我通常把CSS和腳本稱爲靜態這樣

/Static/Css 
/Static/Js 

文件夾我試圖註冊自己的包像這樣:

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

而且在

Global.ascx.cs 

我這樣做了:

BundleTable.Bundles.RegisterScriptsAndCss(); 

生成的標記看起來是這樣的:

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

但是它不能正常工作,要求如下:

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

我在做什麼錯?

更新

我想我終於可以通過執行以下操作來解決這個問題:

  1. 卸下AddDirectory調用bootstrapCss.AddDirectory("~/Static/Css", "*.css");

  2. 給束路徑不反映真正的目錄結構

+1

你是什麼意思的否2「給束的路徑,不反映真正的目錄結構」? – CallMeLaNN 2012-10-19 11:02:58

+0

如果你有一個像這樣/ scripts/app的目錄結構,你不應該在捆綁中使用該路徑(「〜〜/scripts/app「)或者至少我在mvc 4 rc。Perhap中遇到了一些問題這不再是問題。 – Pelle 2012-10-21 10:02:42

+0

嗨,你有什麼線索命名空間我失蹤了嗎?我沒有獲得引導程序中的Addfile或AddDirectory。 ? – Sakthivel 2013-04-23 13:20:13

回答

4

如果在幾天前完成,它運作良好。我創建了一個名爲Helper的文件夾,然後我創建了一個名爲CssJsBuilder的新類。

我的課是這樣的:

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

之後。轉到Global.asax

  1. 刪除或註釋掉BundleTable.Bundles.RegisterTemplateBundles()
  2. 添加CssJsBuilder.Initializing()Application_Start()方法。
  3. 重新創建項目,然後再次啓動它。

希望這對你也有效。

2

在Global.asax.cs中更換

BundleTable.Bundles。RegisterTemplateBundles();

BundleTable.Bundles.EnableDefaultBundles();

0

這是它是如何工作的。

這是簡化版本我只用的Default.aspx文件中沒有Global.asax的(你可以我們,如果你想)

在這個例子中,我用2個目錄內容2Scripts2

在內容2我有2個CSS文件一個用於類=「naziv」等類=「naziv2」

在Scripts2

有2個文件中的一個與函數f1()的定義和其他具有f 2()definitio ñ

位於/ bin目錄下應該有3個文件:

Microsoft.Web.Infrastructure.dllSystem.Web.Optimization.dllWebGrease.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

你在做什麼「錯誤」是你的包路徑對應於一個REAL路徑。據我瞭解,當「/ Static/Css?v = D9JdmLZFFwjRwraNKfA1uei_YMoBoqLf-gFc0zHivM41」的請求進入時,路由引擎首先查找物理路徑。它會找到與您的文件夾「靜態」相匹配的文件,並嘗試在其中找到與「Css?v = D9JdmLZFFwjRwraNKfA1uei_YMoBoqLf-gFc0zHivM41」匹配的文件。當它找不到一個,因爲它不存在,它會提供一個404.(我也看到一個拒絕訪問。)當路由引擎找不到物理文件路徑時,它會查找其他處理程序,如捆綁和縮小以滿足請求。

無論如何,我想你已經從你的評論中弄清楚了,但我不確定任何人都會發現你的問題。只需將您的變更登記從:

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

到:

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

如果你做出的改變,你的問題就會迎刃而解,(當然也對應於「捆綁」沒有物理路徑