Bundle.config confused about debug and release and minification - bundle

I read this article http://www.asp.net/mvc/tutorials/mvc-4/bundling-and-minification and I just feel there's a lot of content missing from it.
I was developing on a project using unminified javascript files. However, this became an issue when I decided to publish my project to another server, where bundle.config hijacks my javascript files and does things I never knew that I needed to test on my development, and now my dev machine is throwing all kinds of javascript errors. So now, I'm here, reading up on what bundle.config does with min files.
After reading the article, I made the following assumptions:
If I set my project to debug mode, my project will get all javascript files that does not contain any "min.js" files.
if I set my project to release mode, my project will attempt to get all my min.js files, and if there are no min.js files, then the non-min files will be converted to a minified version.
Based on those two assumptions, turns out I was wrong. Switching to Release mode doesn't do anything with min files, it acts the same way as my Debug mode.
Secondly, going into the web.config and setting the following to false (previously true):
<compilation debug="false" />
takes all my files that are not minified and minifies them, ignoring any min files I have! I don't see anything about File.min.js, all I see is something like: "File?v=dw-fikdksdm..." which is fine, since this is considered a "bundle" and gets minified, but why can't I just see my mins loaded? and what happens if minification and bundling throws javascript errors? What would I have to do at this point? Can I prevent some javascript files from not being included in a bundle and/or minified?
Also I've noticed there are a couple of 403 errors that occur when tried to load up the javascript resources.
Can someone explain what's going on here and why this is goes against my original assumption?

Okay, here are a few things I discovered about this:
When in debug mode, and you check the web.config:
<system.web>
<compilation debug="true">
then all your javascripts will be preserved within the bundle virtual directory (they will not merge into a single file and they will not be minified).
When switching to release mode, then switch to:
<system.web>
<compilation debug="false">
so that all your javascript files within a bundle are minified and compiled into a single file, this reduces round trips to the network. Please note, one file is created for each bundle.
If you want to get the optimizations enabled regardless of whether or not you're in debug mode, then set BundleTable.EnableOptimizations = true, which forces the minification and bundling. If you leave this out of the code, then BundleConfig will look at the web.config instead.
RegisterBundles(BundleCollection bundles) method in BundleConfig.cs, you put in:
BundleTable.EnableOptimizations = true;
bundles.UseCdn = true;
var cssTransformer = new CssTransformer();
var jsTransformer = new JsTransformer();
var nullOrderer = new NullOrderer();
and this is how you'd add in javascript files:
var jqueryBundle = new CustomScriptBundle("~/bundles/jquery");
jqueryBundle.IncludeDirectory("~/Scripts/JQuery", "*.js");
jqueryBundle.Transforms.Add(jsTransformer);
jqueryBundle.Orderer = nullOrderer;
bundles.Add(jqueryBundle);
Couple notes:
Bundle.config does ignore all min files. I added File.min.js, and File.js, and it ignores File.min.js, and it minifies File.js and bundles it with other files included in the bundle. I checked because when I minified one of the files myself, all the variable names (not the structured code) compared to what was downloaded in my website was completely different than the min file I included in the project. So, this verifies that min files are not needed in your project.
Bundle.config ignores minifying any files named like this.. "File.debug.js", this will never be minified, in fact, it will never be included in your project in release. I found this out after realizing one of my javascript files never making it to the site.
403 errors will occur if you use "Content/css" as your virtual directory of where your bundle will appear, this needs to be changed to "bundles/css" and the 403 will go away like so (using razor):
#Styles.Render("~/bundles/css")
meaning if you have this in your code (notice where ~/bundle/css" is, this will be where your css files will go):
BundleTable.EnableOptimizations = true;
bundles.UseCdn = true;
var cssTransformer = new CssTransformer();
var jsTransformer = new JsTransformer();
var nullOrderer = new NullOrderer();
#region CSS Styles
var cssBundle = new CustomStyleBundle("~/bundles/css");
cssBundle.IncludeDirectory("~/Content/CSS", "*.css")
.IncludeDirectory("~/Content/CSS/Override", "*.css");
cssBundle.Transforms.Add(cssTransformer);
cssBundle.Orderer = nullOrderer;
bundles.Add(cssBundle);
#endregion
If your css has a relative path, this may also be changed, so look for 404 errors
Not all minified files will behave the way you want them to.. so you will have to ultimately do a semi bundled version (or you do not have to minify any js at all, and just bundle them)
But if you want to continue on doing the minified javascript and you do not know which files is throwing the error, the following steps will help:
Bundle everything
Open your browser and find all the sources of your bundled minified js
Copy working bundled js into another file
start manually inserting javascript using the tags instead of bundleconfig.cs, and keep adding them one by one until one fails.. if that fails.. then you'd have to use the un-minified version of that project
repeat step 3-4
I wish there was better documentation of bundle.config at the time of this writing, but I found this entire experience to be severely disappointing.

Related

How to minify css files using MVC .NET Bundle Conifig file

i have the below code in my BundleConfig.cs file. the current configuration settings concatenates all the files into a single file, but i want that single file to be minified also,so that the file size will be reduced and performance will be increased.
bundles.Add(
new StyleBundle(
"~/Contents/css/style-bundle").Include("~/Contents/css/reset.css",
"~/Contents/css/page1.css",
"~/Contents/css/page2.css"));
Add this code to your code of bottom
BundleTable.EnableOptimizations = true;
minify js also css.
I guess you didn't have a minified file at all on your solution. First copy each css text on minifier site like: CSS Minifier or Minifier. Then add this to your solution with min word on the filename like:
page1-min.css
You don't necessarily need to add this on your bundle since ASP.NET will do this for you when in release mode.
Make sure you are on release mode before you run your application and check your page source.

MVC Bundles - force minification even if a .min file is present

Consider the following scenario:
I use Web Essentials, thus my .less files get compiled into .css, .map en -min.css files. I also use MVC StyleBundles.
Expectation:
In release builds, the StyleBundle "handler" bundles and minifies all the .css files defined in the bundle. (not the .min files)
Actual result:
In release builds, the StyleBundle "handler" does bundle, but uses the .min files generated by Web Essentials, if found. Else wise is minifies the .css itself.
Can I configure the "handler" to ignore the generated .min files and always minify the .css files itself?
Deleting all present .map en -min.css files and generating a solution-wide Web Essentials setting in which I disable the generation of minified files and is not a feasible solution in my team.
Thanks!
A quick and easy solution to this would be the following:
Web Essentials allows you to create a solution-wide settings file that can be checked into your version control system.
The option to create this file is under the Web Essentials menu that gets added when it gets installed.
Note: Some plugins may conflict with this and I've had one PC where the Web Essentials menu was missing even after several attempts to re-install.
After you click this, it will create a file WebEssentials-Settings.json in your solution directory where you can customize settings that will get used by all of your team members when they load up the solution the next time.
To disable the automatic minification LESS files, just change the CompileOnBuild, CompileOnSave, and MinifyInPlace settings to false.

Does the ASP.net bundler automatically minify files?

I'm using ASP.net MVC 4. Like the question states, if I put a bunch of JS files (or CSS, for that matter) into a bundle, will it automatically be minified? For example, should my bundle read:
bundles.Add(new ScriptBundle("~/bundles/exampleBundle").Include(
"~/Scripts/jquery-masked.js"
"~/Scripts/jquery.idletimer.js"
));
Or should it instead include the minified files initially:
bundles.Add(new ScriptBundle("~/bundles/exampleBundle").Include(
"~/Scripts/jquery-masked.min.js"
"~/Scripts/jquery.idletimer.min.js"
));
??
Edit: Now I am wondering if bundling the .min files instead adds any optimization. Will it increase performance including the .min files in the bundle instead of the basic files? (Maybe the "minifier function" takes some time?)
The Asp.Net bundler does bundle all scripts in the same bundle into one single file, listed in the order they are defined in the bundle. This single file is then minified and delivered to the client.
If you include both the normal and minified versions of a script in your script directory, the bundler will automatically deploy the full script during debugging sessions and the minified version during production. You should avoid referring to the minified versions of your scripts in the bundle configuration, unless you want the minified version deployed to your debug sessions.
You don't have to include minified files, that's automatically done by bundle engine. In fact, I remember including minified files caused problems (maybe this is fixed on latest mvc version)
You may think this is not working since optimizations (bundling and minifying) are only performed when debug=false on web.config.
<system.web>
<compilation debug="false" />
</system.web>
There is a way to force optimizations even when debug = true using BundleTable.EnableOptimizations. Here you have an example
public static void RegisterBundles(BundleCollection bundles)
{
bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-{version}.js"));
BundleTable.EnableOptimizations = true;
}
These are two different terms called bundling and minification.
Minification : is you minified versions of JS files where you compress the content by renaming the variables.
Bundling : is altogether a different thing. To reduce the network roundtrips it's better to combine everything in one file and download it on client in one request.
So you can bundle the minified version of JS to get this benefit.

Publishing a website is not updating my CSS bundles

When I run my code from Visual Studio in release mode, and check the bundled style sheet, I can see my updates to the css files in that bundle. However when I publish the website to the server or my local machine, my changes in the style sheets have not come through. The bundled style sheet is still the old one.
I have tried an IIS reset, a clean build/rebuild, deleted all files from the IIS folder and re-published.
I am using LESS if that makes any difference.
My bundle config:
bundles.Add(new StyleBundle("~/bundles/requiredStyles").Include(
"~/Content/Style/Libs/bootstrap.min.css",
"~/Content/Style/Libs/font-awesome.min.css",
"~/Content/Style/Globals/application.css",
"/Content/Style/Libs/muliDropdown.css",
"~/Content/Style/Libs/smoothDivScroll.min.css",
"~/Content/Style/Libs/jasny-bootstrap.min.css"
));
I'm checking the bundled css by visiting http://www.mywebsite.com/bundles/requiredStyles
So I made a change in application.css which is fine if I hit play in visual studio (in release mode), but when I publish to my local IIS, my change is no longer there.
This can happen if you have a minified version of a css file in the same directory as your unminified file.
For example, if you have the following files:
~/Content/bootstrap.css
~/Content/bootstrap.min.css
in your directory, and you register the "bootstrap.css" file in your bundle, the optimizer will first attempt to use the "bootstrap.min.css" file during publish. If you only updated the "bootstrap.css" file and did not update the "bootstrap.min.css" file, you will get the old styles from "bootstrap.min.css". You can fix this problem by deleting the "bootstrap.min.css" file or by updating it.
This does not happen in a debug build because it does not pull the minified files if your compilation is set for debug using the following:
<system.web>
<compilation debug="true" />
<!-- Lines removed for clarity. -->
</system.web>
You can also overwrite the web.config setting by disabling the optimizations via:
BundleTable.EnableOptimizations = false;
This would go inside your BundleConfig.cs file.
In my case bootstrap.min.css also exists in content folder which I removed it and web site working fine.
as per Filip Stanek mentioned "the optimizer will first attempt to use the "bootstrap.min.css" file during publish"
even if we didnt add it in bundle config while publishing code it point to "bootstrap.min.css"
I recently encountered a similar issue with bundling. I use angularJS in a webapi project in visual studio.
My web.config had debug set to true. I set it to false. No change.
Then I tried setting my compiler conditions to true (in global.asax.cs|app...start method):
'#if DEBUG'
'BundleTable.EnableOptimizations = true;'
'#else'
'BundleTable.EnableOptimizations = true;'
'#endif'
That did not work either.
Finally I ended up moving the referenced/missing file (a <controllerName>.js) in the bundle to another place in the stack. When I debug I uncomment the file from the bundle because I include it directly in the index.html. It's possible that VS did not compile the change when I restored it.
' bundles.Add(new ScriptBundle("~/SomeBundleName.js")
.Include("~/Scripts/IWASMissingIntheBundle.js")
.Include("~/Scripts/IWASNEVERMISSINGANDstillhere.js")
.Include("~/Scripts/MOVEDIWASMissingHEREANDNOWImFound.js")'
My proposition is that the compiler did not pick up the change and regardless of cleaning and rebuilding still did not. After moving the file and republishing it seemed to work.
But also I cleared the cache in my browser, not just from the "Clear Cache" button that I use in Chrome, but also from the debugger|Network panel. Some stepping through the above should help.

Is there a way to disable the CSS preprocessor in dart web_ui?

I'm generating my CSS with twitter bootstrap, and want to simply use that CSS. When the dart CSS preprocessor goes over the already process .less files, it breaks some of the definitions.
Initially I just put the .css file in the out/css/ folder and linked to that, but then the dart editor says that it can't find the imported CSS file.
If you ever need it, WebUI compiler has flags to disable some features. For example, you can use --no-css to disable processing of css. You can either pass these flags when invoking dwc from the command line, or if you are using build.dart, you need something like this:
var args = new Options().arguments.toList();
args.addAll(['--', '--no-css']);
build(args, ['your_entrypoint.html'])
WebUI tries to process any css file that can be reached via relative paths from the entrypoint file. If you provide absolute paths or http URLs for css classes, WebUI will not process those links either. That would let you remove the warnings, while still processing CSS everywhere else.
If you have a local dev server, you can use a project-absolute path (instead of a file-system absolute path) to get things working.
If you can, please do open a bug with more details to track the source of the problems you saw.

Resources