Ik probeer bundeling te gebruiken om & verklein sommige CSS-bestanden. In mijn Global.aspx.cs Application_Startheb ik het volgende:
var jsBundle = new Bundle("~/JSBundle", new JsMinify());
jsBundle.AddDirectory("~/Scripts/", "*.js", false);
jsBundle.AddFile("~/Scripts/KendoUI/jquery.min.js");
jsBundle.AddFile("~/Scripts/KendoUI/kendo.web.min.js");
BundleTable.Bundles.Add(jsBundle);
var cssBundle = new Bundle("~/CSSBundle", new CssMinify());
cssBundle.AddDirectory("~/Content/", "*.css", false);
cssBundle.AddDirectory("~/Content/themes/base/", "*.css", false);
cssBundle.AddFile("~/Styles/KendoUI/kendo.common.min.css");
cssBundle.AddFile("~/Styles/KendoUI/kendo.default.min.css");
BundleTable.Bundles.Add(cssBundle);
En in mijn .cshtml-bestand heb ik het volgende:
<link href="/CSSBundle" rel="stylesheet" type="text/css" />
<script src="/JSBundle" type="text/javascript"></script>
Als ik echter de bron van het CSS-bestand van mijn bundels bekijk, staat er het volgende:
/* Minification failed. Returning unminified contents.
(40,1): run-time error CSS1019: Unexpected token, found '@import'
(40,9): run-time error CSS1019: Unexpected token, found '"jquery.ui.base.css"'
…. nog veel meer
Enig idee hoe dit op te lossen?
Ik heb het teruggebracht tot de volgende regel:
cssBundle.AddDirectory("~/Content/themes/base/", "*.css", false);
Als ik alleen die regel code heb, krijg ik dezelfde fouten.
Antwoord 1, autoriteit 100%
Er zijn hier een paar problemen:
-
Het css-probleem is te wijten aan het opnemen van jquery.ui.all.css, aangezien de standaard-minifier de volgende importen niet ondersteunt, en dit is toch niet wat je wilt doen, omdat het alle de jQuery ui css-bestanden. Dus wat u in plaats daarvan wilt doen, is niet *.css gebruiken, en in plaats daarvan expliciet vermelden welke jQuery ui-bestanden u wilt opnemen:
bundles.Add(new StyleBundle("~/Content/themes/base/css").Include( "~/Content/themes/base/jquery.ui.core.css", "~/Content/themes/base/jquery.ui.resizable.css", "~/Content/themes/base/jquery.ui.selectable.css", "~/Content/themes/base/jquery.ui.accordion.css", "~/Content/themes/base/jquery.ui.autocomplete.css", "~/Content/themes/base/jquery.ui.button.css", "~/Content/themes/base/jquery.ui.dialog.css", "~/Content/themes/base/jquery.ui.slider.css", "~/Content/themes/base/jquery.ui.tabs.css", "~/Content/themes/base/jquery.ui.datepicker.css", "~/Content/themes/base/jquery.ui.progressbar.css", "~/Content/themes/base/jquery.ui.theme.css")); -
Ten tweede wil je de Script/Styles.Render-methoden gebruiken in plaats van expliciet naar de url van de bundel te verwijzen terwijl je aan het doen bent, omdat de helpers niet automatisch individuele verwijzingen naar elk script/stijlitem bundelen/verkleinen en weergeven in de foutopsporingsmodus, en voeg ook een vingerafdruk voor de bundelinhoud toe aan de url, zodat browsercaching correct werkt.
@Scripts.Render("~/JSBundle") and @Styles.Render("~/CSSBundle") -
Je kunt ook StyleBundle/ScriptBundle gebruiken, wat gewoon syntaxtisch suiker is om niet te hoeven passen in nieuwe CSS/JsMinify.
Je kunt ook deze tutorial bekijken voor meer informatie: Bundelen Zelfstudie
Antwoord 2, autoriteit 21%
Of wat je kunt doen is je eigen BundleTransform voor CssMinify schrijven als je natuurlijk zo’n flexibiliteit nodig hebt. Dus je code in BundleConfig.cs ziet er bijvoorbeeld als volgt uit:
using System;
using System.Web.Optimization;
using StyleBundle = MyNamespace.CustomStyleBundle;
public class BundleConfig
{
public static void RegisterBundles(BundleCollection bundles)
{
bundles.Add(new StyleBundle("~/Content/themes/base/css")
.IncludeDirectory("~/Content/themes/base", "*.css"));
}
}
Dan wat u moet toevoegen is:
public class CustomStyleBundle : Bundle
{
public CustomStyleBundle(string virtualPath, IBundleTransform bundleTransform = null)
: base(virtualPath, new IBundleTransform[1]
{
bundleTransform ?? new CustomCssMinify()
})
{
}
public CustomStyleBundle(string virtualPath, string cdnPath, IBundleTransform bundleTransform = null)
: base(virtualPath, cdnPath, new IBundleTransform[1]
{
bundleTransform ?? new CustomCssMinify()
})
{
}
}
public class CustomCssMinify : IBundleTransform
{
private const string CssContentType = "text/css";
static CustomCssMinify()
{
}
public virtual void Process(BundleContext context, BundleResponse response)
{
if (context == null)
throw new ArgumentNullException("context");
if (response == null)
throw new ArgumentNullException("response");
if (!context.EnableInstrumentation)
{
var minifier = new Minifier();
FixCustomCssErrors(response);
string str = minifier.MinifyStyleSheet(response.Content, new CssSettings()
{
CommentMode = CssComment.None
});
if (minifier.ErrorList.Count > 0)
GenerateErrorResponse(response, minifier.ErrorList);
else
response.Content = str;
}
response.ContentType = CssContentType;
}
/// <summary>
/// Add some extra fixes here
/// </summary>
/// <param name="response">BundleResponse</param>
private void FixCustomCssErrors(BundleResponse response)
{
response.Content = Regex.Replace(response.Content, @"@import[\s]+([^\r\n]*)[\;]", String.Empty, RegexOptions.IgnoreCase | RegexOptions.Multiline);
}
private static void GenerateErrorResponse(BundleResponse bundle, IEnumerable<object> errors)
{
StringBuilder stringBuilder = new StringBuilder();
stringBuilder.Append("/* ");
stringBuilder.Append("CSS Minify Error").Append("\r\n");
foreach (object obj in errors)
stringBuilder.Append(obj.ToString()).Append("\r\n");
stringBuilder.Append(" */\r\n");
stringBuilder.Append(bundle.Content);
bundle.Content = stringBuilder.ToString();
}
}
En als je wat meer fixes / fouten nodig heeft kunt u deze logica uit te breiden in FixCustomCssErrors methode.