Is there a way to include a different Javascript file in an ASP.NET page depending whether it's a debug or release build?
For release builds, I want to include the minified (using yuicompressor) Javascript, but I would like to use the more readable file for debug and development.
You can do one of two things ... either rename the appropriate file to the filename referenced in the html in a postbuild step, or dynamically include the html based on the preprocessor symbol.
For development, if you're using Visual Studio 2008 SP1 you can also take advantage of the improved support for JavaScript IntelliSense. Scott Gu has a blog post here:
jQuery Intellisense in VS2008
The basic set up is:
Install Hotfix KB958502
Reference release versions of your .js files as you would normally
Ensure that you have the "development" version of the .js file sitting next to it, called *-vs-doc.js or *.debug.js
This will get you all the intellisense for the files.
Related
I'm an old COBOL programmer that has self-taught myself web development over the last decade. I've always used asp.net for developing and when I first started out I had no clue what I was doing. There are some cases I still don't :). That brings me to my question. When I first started out I didn't know what Nuget packages were so if I wanted to use something like bootstrap I would would download the files from the bootstrap website and load them into my project in a Scripts folder. To call the files I added them into the bundling function provided by asp.net. I've since discovered Nuget Manager and keep my bootstrap versions updated through it, but I've always been afraid to remove the reference to these files from the bundling package.
Today I'm trying to upgrade bootstrap from 4.6 to 5.1, but I'm getting an error. If I go into my bundling package and comment out the reference to bootstrap my error goes away. So my question is, if I'm using Nuget to manage my packages, is it safe to remove them from the bundling package? I feel like the answer is "yes it's safe" but was hoping for confirmation and maybe an explanation on how and if Nuget and bundling work together, if at all...
Well, nuget simple in "most" cases downloads some .net .dll's and assemblies, and then often sets a reference for you. (you could do this manual, but hey its a whole lot less work).
but, when you use nuget to install those packages, some might include javaScript libries and code (such as your example).
Because the bundling expects the scripts to be say in this location:
Public Shared Sub RegisterBundles(ByVal bundles As BundleCollection)
bundles.Add(New ScriptBundle("~/bundles/WebFormsJs").Include(
"~/Scripts/WebForms/WebForms.js",
"~/Scripts/WebForms/WebUIValidation.js",
"~/Scripts/WebForms/MenuStandards.js",
etc. etc. etc.c
Then of course, when you nuget a package, then the location of the scripts VERY LIKLEY is not going to be the above location.
So, you would then remove your older scripts (and above script referances), and add in the new location of such scripts.
So, you are free to remove the existing bundling references, but you not then enjoy use of the script manager and system to "merge together" the many script files.
So, you don't have to use bundeling anyway.
However, in most cases, you WANT BOTH the SomeJava.js and SomeJava.min.js files to exist. And if you modify those files, then YOU need to regenerate the .min version. Since you not (likely) to be modifying those .js files, then you can well dump the bundling of such files. But you are free also to add them to the above bundling reference.
All bundling does is "merge" the .js files together - so that you don't have 50 or 100 different separate .js files, and thus 50 or 100 difference downloads and references in a web page to use all those many .js files.
So, it not a huge deal. If you only adding say bootstrap via nuget, then I would hunt down the location of the new .js files, and add them to the bundling. But, it not all that huge of a deal if you don't. The issue then becomes how do you add the new .js and .css files to the given web page you are working on. (and toss in use of a master page, and again more complex).
So, in theory, you could remove the existing (older .js references) and then add the css. files that nuget created. I not looked, and don't know if the .js files remain in "packages" folder, or during an install that nuget copies to some folder (such as scirpts).
Just keep in mind, do keep and have the .min versions of those .js files. if you in web.config set debug=false, then the web site flips over to using the .min versions of the .js files - they have to exist, and even without bundling they have to exist, and this "flip" occurs (you now using .min versions of js files).
This is a HUGE topic, and probably oh so far beyond that of a simple post on SO.
but, suffice to say, you can well dump use of the bundling, and remove your older .js references. (but, since you having to do that, then might as well add the newer references then at that point in time, right???).
I want some expert advice on ASP.NET MVC Bundling and Minification. I have in my project script files that have both unminified (.js) and minified versions (.min.js). I have included them in my script bundle as follows:
bundles.Add(new ScriptBundle("~/bundles/layout").Include(
"~/Scripts/jquery-{version}.js",
"~/Scripts/lib/errorhandling.js",
"~/Scripts/lib/errorhandling.min.js",
"~/Scripts/vendor/modernizr.custom.js",
"~/Scripts/vendor/modernizr.custom.min.js",
"~/Scripts/toastr.js",
"~/Scripts/toastr.min.js"));
It seems that the bundle indeed contains only once each script file, not twice. I have confirmed this both for development and production. (As a side note, in development, that is, when debug=true, the bundles are not rendered but the files are included as separate script tags. This is the desired behaviour for me, as well.)
My questions are:
(1) Is this the best and recommended way to include already minified files for production setup and unminified files for development?
(2) Does ASP.NET try to minify the whole bundle in production (even though it is already minified)? If yes, what is the best way to prevent ASP.NET from trying to minify the bundle?
Thanks in advance!
There is no need to specifically include the minified versions in your script bundle. By default, MVC will search for a matching file with .min.js and include that (not entirely sure if it trys to minify further). If not, it creates a minified version. You can test this by adding the following to BundleConfig.cs
using System.Web.Optimization;
then adding the following at the end to override debug=true in development
BundleTable.EnableOptimizations = true;
From MS documentation
The bundling framework follows several common conventions such as:
Selecting “.min” file for release when “FileX.min.js” and “FileX.js”
exist.
Selecting the non “.min” version for debug.
Ignoring “-vsdoc” files (such as jquery-1.7.1-vsdoc.js), which are used only by
IntelliSense.
Minification, or not, the bundling feature is useful to for logical groupings of scripts and css that go together, and as a single place to control things. It also generates unique URLs, so eliminates browser cache problems.
If you use ScriptBundle, the engine will try to minify, (except when you set debug=true as you've shown).
You can turn off minification, but retain bundling, by just using Bundle() instead of ScriptBundle(). See Martin's answer here:
ASP.NET Bundles how to disable minification
As an aside, using pre-minified files with Bundle() as opposed to ScriptBundle(), will preserve the license headers. With jquery's MIT license, it at least stipulates that it should not be removed. I'm not sure how to interpret the fact that the default Microsoft MVC template uses ScriptBundle().
I've set up Web Essentials 2013 (in Visual Studio 2012) and loaded in the default Twitter Bootstrap LESS source files. Auto-build and minification is working perfectly, except Web Essentials quite overdoes the job. When I select "bootstrap.less", make a change and save it, Web Essentials creates a new "bootstrap.css" as well as a "bootstrap.min.css" with everything inside I need. But when I edit e.g. buttons.less, it creates a buttons.css (and buttons.min.css) too (with all the includes and mixins). Which means, in fact, I'll have nearly the same css files over and over again under different names.
Can I declare certain files to be ignored on save?
There is a convention in Web Essentials that if the name of your less file starts with an underscore (like _utils.less) it will not be compiled to css on save.
https://webessentials.uservoice.com/forums/140520-general/suggestions/3319359-don-t-compile-nested-less-files
Okay, I figured it out.
What I initially wanted was LESS compilation on build, Web Essentials was so kind to do this on save. To deactivate this, in Visual Studio 2012 head over to Tools -> Options -> Web Essentials -> LESS and deactivate "Generate CSS file on save".
According to the Visual Studio Extension page for Web Essentials, minification on build works not by now, but will on future releases. I have to delete the .min.css files by myself and create it again on every build as it seems. :(
Pro-tip for every dev:
If you use any framework, tools, extensions etc. and your new super-powers don't work as expected, don't blame the extension, shut up and do it yourself.
Although what #corvuscorax says is absolutely true what I do (if you don't like the idea of starting your file names with an underscore) is to create a folder starting with a #
This seems to stop webessentials from compiling your less.
Note that Visual Studio won't let you create a folder with a starting hash so you will have to create it using your Windows Explorer and then add it to your project via visual studio.
For ignoring only files, you can use underscore at the file name.
Web Essentials has an internal convention whereby files beginning with an underscore will not be saved to CSS.
This is actually quite useful. You don’t want your variables.less or mixins.less files being saved as variables.css or mixins.css. So in this case, name them _variables.less and _mixins.less. They will be compiled (and thus checked for correct syntax) but won’t take up space on disk or in source control as redundant CSS files.
https://medium.com/#brendaningram/web-essentials-not-saving-css-files-a450b8c2d23a
There is a way to keep your filenames and prevent WebEssentials from compiling your LESS at the same time. Create .weignore file with filenames or masks for ignored files as described in the docs.
Problem:
I have been trying to integrate minification of javascript and css files in our VS2010 (.net 4.) projects. From what I hear, .net 4.5 and VS2012 will have minification build into the editor, so it will be as easy as setting a flag it will work. Unfortunately we are sill on VS2010 (.net 4.0).
Let me explain what I want to do and what I dont want to do.
I dont want to do big setups with classes/config file(s)/etc just to minify because all that stuff will have to be loaded on our build machine and even the build xml files might have to be modifies to make it work. Also, once we go to vs2012 and .net 4.5 all these configs/classes/etc will have to be discarded because vs2012 will have the build in functionality.
Here is what I think might be the best option. Since I am using the ScriptManager and it can already pull either a .debug.js (non-minified) or a .js (minified) script based on the build type, it seems all i need to do is to have some sort of (pre?) build event that will re-build a non-minified .js file into a minified one. Obviously the build event will have to call a minication module which would have to be installed on local computer (the YUI Compressor seems very nice). The module would update the minified .js file.
I have been reading about this, but I am getting a little bit lost. There are a lot of third party tools with bunch of setup and classes which I do not want to add.
Did anyone do something similar as I explained about?
If not what is the next best simple solution?
(By the way, if you are going to say move to VS2012/4.5, thats not a solution for us at this point)
Solution:
Thank you Parv Sharma for your answer.
I would just like to explain what I did so that it may help someone in the future.
I installed the Microsoft Ajax Minifier
Created a batch file to add minifer to ENVIRONMENT PATH variables: setx path /m "%PATH%;C:\Program Files\Microsoft\Microsoft Ajax Minifier"
Added the following pre-build events into my project:
ajaxmin $(ProjectDir)Script.js -out $(ProjectDir)Script.min.js -clobber
If Script.min.js does not exist, it will be created by the build event, but it will not be added to the project (not sure how to do that through the events).
When you add a new script file, mynewscript.js, just create a second blank file called mynewscript.min.js and add an pre-build event for it.
Using this approach the only thing you have to do to the build machine is run the Microsoft Ajax Minifier setup package and the batch file. Thats it everything else will be part of your pre-build events.
what you are looking for is probably this
http://ajaxmin.codeplex.com/documentation
by using this you would be able to use this third party tool as the minifier
after downloading the tool you have 2 options
1. edit the MSBUILD file to include building the js as per build event
OR 2. to attach this tool to VS and assign a key compbination to it.. this way you would be able to minify whenever you want just like we do F5 OR Cntrl-Shift-B
Attaching to VS is easy just to to external tools and in the Tools menu and add this tool with the required params
I'm using SquishIt and have a .less file which I add to a CSS bundle with the following line
.Add("~/content/styles/dev.less")
This compiles as dev.less.debug.css when I build the solution, however I'd like to be able to just save the .less file and it automatically compiles the css (so I see the change instantly in my browser as I would with a traditional CSS file).
I have looked at a number of extensions to achieve this (such as LessExtension and LessCssForVisualStudio) but these require the file to be added to the bundle as dev.css rather than dev.less. Mindscape Web Workbench does not compile LESS files in its free version so I do not know if it also requires dev.css.
I can't change the link to the file as the project will be worked on across teams, where some won't install an extension and will be happy to build the solution to compile.
Is there and extension that automatically compiles LESS that is built to work with SquishIt?
If you use it on non-production site, I would suggest using less.js (It will render css with js on client-side).
Squishit uses dotless under the hood, so you could use that directly.. either set it up so that you request the less file and a handler returns CSS or you can use the exe to compile on build and also the watch mode... I'm not sure what's best for you, but you can find more information on the dotless wiki (https://github.com/dotless/dotless/wiki/Using-.less)
Web essentials does this job perfectly and its free.
http://vswebessentials.com/