This is curious.
When I have this, for example, in my BundleConfig class:
bundles.Add(new StyleBundle("~/iCheck/css").Include(
"~/Content/iCheck/flat/green.css"));
bundles.Add(new ScriptBundle("~/iCheck/js").Include(
"~/Scripts/icheck.js"));
In a server, resources are retrieved from the correct location:
/Content/iCheck/flat/green.css
however, in other server, resources are retrieved using this URL:
/iCheck/css?v=ENsQ8JbHO7Zzp1Za0G2FBDKGGsGf_VDHd_S5fgCyCxA1
That causes images inside the CSS not to be found. How can I solve it? in both servers there is the same deployed version of the site. I don't understand why in one server the bundles behave different from others.
Bundling is enabled for Release builds but not for Debug.
The property BundleTable.EnableOptimizations will allow you to override the bundling setting in development.
To fix the relative paths within the CSS look at the CssRewriteUrlTransform.
.Include("~/Content/iCheck/flat/green.css", new CssRewriteUrlTransform())
Related
Kendo configurator installed its css content into "~/Content/kendo/2016.1.226" folder. I need to create the same virtual path in the mvc bundler in order to make it work (see http://www.telerik.com/forums/asp-mvc-css-minification-breaks-kendo-bootstrap).
However, when I create the bundle:
bundles.Add(new StyleBundle("~/Content/kendo/2016.1.226/kendo-css").Include(
"~/Content/kendo/2016.1.226/kendo.common.min.css",
"~/Content/kendo/2016.1.226/kendo.default.min.css"));
I get 403 Forbidden response. Is there a way to make a virtual path containing dot work?
We use .net 4.6.1 and asp mvc 5.
Obviously, the fallback is to rename the folder and all the paths, but I am asking if there is another way.
This is because the name of your bundle (~/Content/kendo/2016.1.226/kendo-css) contains the same path as a physical path.
I would recommend changing your bundle name to something like ~/css/kendo or the like.
You should also use the rewriting then to fix the URLs, for example:
.Include("~/content/css/menusprites.css", new CssRewriteUrlTransform())
More can be found in this Telerik forum post: http://www.telerik.com/forums/asp-mvc-css-minification-breaks-kendo-bootstrap#KBg1hY3Z1EqbutQZxshjow
This is how I include JavaScript files in my ASP.NET MVC application,
Bundles.Add(new ScriptBundle(ConfigBundles.Scripts).Include
(
"~/Content/Scripts/Libraries/framework-{version}.js",
"~/Content/Scripts/Libraries/controls-{version}.js"
));
My understanding is that whenever I do a new release where the referenced JavaScript files have changed, i just need to increment the version number so that user's web browsers know that they need to clear the existing cache and request the new file.
However, this same process does not seem to work for stylesheets - this is how I load them:
Bundles.Add(new StyleBundle(ConfigBundles.Styles)
.Include("~/Content/Styles/Site-{version}.css", new CssRewriteUrlTransform()));
However, this does not seem to work - when I change the name of the Site.css to include a version, the bundling doesn't seem to detect it. Furthermore, in most guides on bundling they just talk about using this feature with Scripts - I haven't seen anyone confirm that it can used with styles as well...
Am I going about this the right way?
I've searched SO - found many of the same question, though none of the answers helped.
I've built a bunch of sites and not ran into this issue before.
Essentially, my script bundle results in a 404 for each of the files in my javascript folder.
My structure (at the moment, i've changed it a bunch!) looks like this:
I do this so i can guarantee that ASP.Net doesn't change the order - i can ensure certain scripts are ahead of others. It's how i've always done it and it normally works well.
My bundle script - at the moment - is:
public static void RegisterBundles(BundleCollection bundles)
{
bundles.FileSetOrderList.Clear();
// stlyes
StyleBundle cssBundle = new StyleBundle("~/bundles/css");
cssBundle.IncludeDirectory("~/content/css", "*.css", true);
bundles.Add(cssBundle);
//scripts
ScriptBundle jsBundle = new ScriptBundle("~/bundles/jscript");
jsBundle.IncludeDirectory("~/content/javascript", "*.js", true);
bundles.Add(jsBundle);
}
I have tried a whole bunch of virtual paths.
My CSS loads perfect. My Js - i get a list of 404's; one for each of the */js files.
Any ideas?
My console looks like this - which also shows me that bundles.FileSetOrderList.Clear(); isn't actually clearing its list else i would have jquery before angular (as is my intent)
UPDATE
If i BundleTable.EnableOptimizations = true; in my bundles then it's all bundled, minified and works - though this sucks for development debugging - what on earth is preventing it working in debug mode?!
This post seems to describe the same problem ASP.Net MVC 5 sub-directory bundling issues and is a known issue with version 1.1.1 of the Bundling framework.
If you don't want to have to downgrade or upgrade to a version where this is working, you always have the option of explicitly adding files to the bundle that you want to come first. Let's say you have your files in the same folder.
/javascript/lib/ascript.js
/javascript/lib/ascript2.js
/javascript/lib/jquery.js
/javascript/lib/yscript.js
You can be explicit about the files you want first via Include(), and then still lump the rest together via IncludeDirectory().
bundles.Add(new ScriptBundle("~/bundles/jscript").Include(
"~/javascript/lib/jquery.js",
.IncludeDirectory("~/javascript/lib", "*.js")
The bundling is smart enough to not double include jQuery.js if it has been explicitly added first. Similarly, you can have multiple .IncludeDirectory calls on your various subdirectories if you want to still keep them sub-foldered.
If you set the enable optimization flag to true, it will overwrite the debug=false and bundle it. just use the below code snippet in your bundle.config file to remove bundling in debug mode.
#if !DEBUG
BundleTable.EnableOptimizations = true;
#endif
I think that it is the nested folders. I'm pretty sure the bundles only look in that direct folder. Have you used that folder structure with bundling before and it worked successfully?
As mentioned I kept getting jquery 404 not found.
This isn't a great answer but this is what I settled with until I find a better answer.
My issue was with the following, this worked very happily locally in development.
bundles.Add(new ScriptBundle("~/jquery").Include(new[]
{
"~/scripts/jquery-1.12.0.min.js",
}));
I tried variations and looked at the other options, in the end I changed it to the following for production. Googles CDN has always been reliable, there is other CDN options if you google around.
bundles.Add(new ScriptBundle("~/jquery", "https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"));
I have build MVC 5 application which works fine when running via VS. When I publish it to the server first time it also works. Now I have made few correction to my css file and publish whole project again but website still see the old css file. I have removed all files from the server and tried few more times but it is still the same. When I check the css file on the server, the changes are inside the file.
I think it is related to MVC bundling as when I check the source it says that is accessing different file which is not even located on the server:
<link href="/Content/cssmain?v=Ikj7NnMg3q9kTHR7ynWOJDQFGMZl3mtVMi_2EkOJxc41" rel="stylesheet"/>
How can I force VS to minificate my css file again?
I've tried cleaning, rebuilding but no luck
Edit:
My bundle set up look like below and all files are located on the server in Content folder.
bundles.Add(new StyleBundle("~/Content/cssmain").Include(
"~/Content/bootstrap.css",
"~/Content/site.css",
"~/Content/ilightbox.css",
"~/Content/bannerscollection_zoominout.css"));
Many thanks
I think it is related to MVC bundling as when I check the source it says that is accessing different file which is not even located on the server:
CDN location? External Css lib (yours or 3rd party)? unsure what you meant by "not located on server"?
Yup, it does (look like ASP.net Bundling in action) - check your Global.asax, App_Start/BundleConfig or _AppStart and see if the bundle configuration setup point to/reference the "correct" locations for your css (and or script).
Is it just you experiencing getting the old css file loaded? Or anyone who views the site?
What's a good strategy for versioning Durandal js and html files?
I noticed that, during development, your browser cache must be disabled in order for you to receive up to date files on each refresh. This is a must for during development.
However, my concern is that when I go to production with my continuous deployment strategy (deploying multiple times per day), that users' browsers will be caching older versions of my app which might lead to unpredictable behaviour.
The approach that springs to mind would be to version the js and html urls somehow so that there is a version number embedded into every request. But I am unsure as to how to make that work internally within the Durandal framework.
Ok, here is the direction that I am heading in. Basically there is something built into requirejs to handle this.
At the top of my main.js, in the call to requirejs.config I can set a urlArgs property that will be appended to every call requirejs makes for a module.
requirejs.config({
paths: {
'text': 'durandal/amd/text'
},
urlArgs: 'v=1.0.0.0'
});
When I want to force production users to get a new version of the requirejs modules I can just increment the version number which will invalidate the browsers cache.
(In my project I have a way of injecting the version number of the assembly containing my main ASP.NET MVC assembly into this property, but the code for that would have distracted from the simplicity of the above example).
Hope this helps someone!
For .NET, add the main-built.js file as a script bundle in App_Start/BundleConfig:
public static void RegisterBundles(BundleCollection bundles)
{
//...
bundles.Add(new ScriptBundle("~/Scripts/main-built").Include(
"~/App/main-built.js"));
//...
}
Reference the script bundle on your index page:
#if (HttpContext.Current.IsDebuggingEnabled)
{
<script type="text/javascript" src="~/Scripts/require.js" data-main="App/main"></script>
}
else
{
<!-- Remember to run the weyland optimizer to create the main-built.js -->
#Scripts.Render("~/Scripts/main-built")
}
As long as you have the default Web.Release.Config file, Visual Studio will automatically remove debug attributes while also minifying and versioning your bundles upon publishing.