I have an issue with the mvc4 bundler not including a file with extension .min.js.
In my Scripts folder i have two files: bootstrap.js, bootstrap.min.js
In my BundleConfig class, I declare
#if !DEBUG
BundleTable.EnableOptimizations = true;
#endif
bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include("~/Scripts/bootstrap.js"));
When running in Debug it renders as expected:
<script src="/Scripts/bootstrap.js"></script>
When running in Release it renders as:
<script src="/bundles/bootstrap?v=57XuMf8ytOYgVErEDhgFDRtQ5jlC48bryka4m2DVq_M1"></script>
Why doesn't it render as:
<script src="/Scripts/bootstrap.min.js"></script>
Why doesn't it render as: <script src="/Scripts/bootstrap.min.js"></script>
Because that's how bundling works in ASP.NET MVC 4. Don't worry, the contents of this /bundles/bootstrap?v=57XuMf8ytOYgVErEDhgFDRtQ5jlC48bryka4m2DVq_M1 is exactly the contents of the /Scripts/bootstrap.min.js. In this case the bundling mechanism hasn't minified the /Scripts/bootstrap.js file but used the already minified version.
The reason you want to use bundles.
Declare one statement but generates multiple import resources codes.
Minify your js or css code
Bundle mutiple files into one file which will reduce the browser
request number.
Bundle will give the request url a suffix which is generated based on
the files. So if you don't cache the page, there will be no js/css
cache problem, you don't need to clear browser cache.
By default, when you're in debug mode (you can modify your Web.config to set if enable DEBUG), the js/css files will not be bundled, so you can see the files seperately which will make it easier to debug.
When it's not debug enabled, the files will be bundled.
So if you already have .min.js files, you can import them directly in your page.
Related
I've created a basic angular project using yeoman's angular generator. While the standard Grunt process is fine in general, I do have my concerns with the way how the views get all minified into the same JS File.
If I have about 10 views on my Page, the requested view can't be seen until 'all' pages have been loaded, since their all in the same file.
I now want to modify the Grunt process, so that each HTMLviewfile get minified into its own file in a views directory. The main angular router should now request the view files as they are requested by the client (user).
Is there any way you could help me. All my research has resulted that the module 'grunt-angular-templates' is responsible for minification of all HTML views. I've yet to find out, how to keep the files from getting merged into a single file.
Thanks!
I found out, that in order to not minify all the view files into the script.js file, you have to remove the ngtemplate process from you gunt build task
I have the following bundle in my BundleConfig:
bundles.Add(new StyleBundle("~/Content/Basic/globalCss").Include("~/Content/Basic/global.css"));
I am using the following to render the CSS bundle:
#Styles.Render("~/Content/Basic/globalCss")
On my local machine (debug environment) the CSS file is included/loaded via its absolute path. I have compilation turned off/false for debug, so this makes sense. When I push to a QA environment (compilation turned on/true), I see the following virtual path being included in the page:
<link href="/Content/globalbasicCss?v=6i8x1Cxf8pXm5g9uxAk8-wcO02DFmeAgYLWpJk-3r_g1" rel="stylesheet">
This was the old virtual path that I had was ~/Content/globalbasicCss.
Why is my bundle not using the new virtual path I provided ~/Content/Basic/globalCss? Is this because there were no changes made to the CSS file included in the bundle, by any chance?
That is the bundling and minification feature. Your CSS bundle is minified and if you had more files they would be bundled in one file.
This happens when you usually build in release mode with the web.config setting
<compilation debug="false">
More information here - http://www.asp.net/mvc/overview/performance/bundling-and-minification
Turns out I needed to make changes to the actual bundled CSS files in order for that bundle virtual path to update. I'm not sure why this is, and would appreciate anyone with better understanding of ASP.NET bundling explaining why this happens this way.
I have minified CSS and JS files that are auto-generated by Web Essentials, and auto-updated every time I update and save the original files.
What would be the best way to automatically toggle the actual (script/import) references within HTML between original (in Dev/Test) and minified (in Production) files?
This is within an MVC ASP.NET web app.
One idea would be to have server-side tags that render either ".min" or empty string based on an environment variable. But I'm wondering if there's a better, smarter, easier, more efficient way of handling this.
Thanks in advance.
Update:
My style bundle is defined like this:
bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/site{version}.css"));
And I reference it like this:
#Styles.Render("~/Content/css")
However, this renders the following:
<link href="/Content/css?v=" rel="stylesheet"/>
It works fine if I take "{version}" out of bundle definition, but renders an empty "v=" if I include "{version}".
Update 2:
I just realized that due to certain complexities of the application, I can't use the bundling solution. What other options do I have?
Bundling will help you in this instance. You should already be able to see an example in your BundleConfig.cs file in App_Start.
Here is a tutorial on how to conifgure it http://www.asp.net/mvc/tutorials/mvc-4/bundling-and-minification
From that tutorial, this is how you actually configure the bundles themselves, the files that will be in them, etc. This includes any jquery in the scripts folder into a bundle called ~/bundles/jquery.
public static void RegisterBundles(BundleCollection bundles)
{
bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-{version}.js"));
// Code removed for clarity.
BundleTable.EnableOptimizations = true; // <-- this line overrides the debug check to show you the minified version even in debug mode... remove it for normal .min in debug/un-minned when not in debug behaviour
}
You then reference these from your views using
#Scripts.Render("~/bundles/jquery")
This will then render a script tag with the .min version of the jquery if you're not in debug or leave it out if you are. There needs to be a .min version and an un-minified version in the same scripts folder (which you should have if Web Essentials is creating the .min for you.
You could actually stop using Web Essentials to do the minification if you use ScriptBundles as they will minify the javascript for you when it packages it into the bundle.
For your update
The "~/Scripts/jquery-{version}.js" means match any file in the scripts folder that starts with jquery- and ends with .js and has some version number between. If the files don't have a version number in them, then don't try and use the {version} substitution.
They do it with jquery in this case so that if you upgrade the version of jquery that you are using, you don't have to go back into your BundleConfig and manually change the file name for your jquery reference.
If your file was named site1.3.7.css, then this would probably work.
bundles.Add(new StyleBundle("~/Content/css")
.Include("~/Content/site{version}.css"));
but it sounds more likely that you just need site.css.
bundles.Add(new StyleBundle("~/Content/css")
.Include("~/Content/site.css"));
I'm not sure what you think prevents you from using them but you can link to files in CDNs and minify or not minify. Even just have individual files in a bundle to get the benefit of minification outside of debug without "bundling" them. So there's probably a way.
I have download a Bootstrap template and embed it on my web application. It works fine when I am trying to access using localhost:xxxxx
But when I try to access using same or any controller(localhost:xxxxx\Dashboard\Patient) styles and scripts are not working.
Also tell me that in above scenario where i have to register or add references of bootstrap
Sounds like your paths are off. If you are using Chrome, hit F12 to bring up developer tools, and then reload the page. Errors will be written to the console indicating resources couldn't be loaded. I'm guessing you are referring to them as thought they reside in the same directory of the page (e.g. <link href="bootstrap.css"...
Try using Bundles and let them manage the paths for you. So add this to your <head>:
#Styles.Render("~/Content/bootstrap")
And add this script Bundle right before your closing </body> tag:
#Scripts.Render("~/bundles/bootstrap")
These refer to a Bundles of CSS and Javascript files. Open up /App_Start/BundleCondif.cs and add these Bundles:
bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
"~/Scripts/bootstrap.js"));
bundles.Add(new StyleBundle("~/Content/bootstrap").Include(
"~/Content/bootstrap.css",
"~/Content/bootstrap-theme.css"));
Note the paths, your bootstrap.js needs to reside in /Scripts/ and your CSS files need to reside in /CSS/
I am currently working with web optimization bundler that is part of the .net framework that bundles up both my javascript and css in to a single file. This works nicely.
I have run in to a problem with it though. See the following code:
BundleTable.Bundles.Add(new ScriptBundle("mybundle").Include(
"~/Scripts/globalize.js",
"~/Scripts/jquery.validate.js",
string.Format("~/resources.axd")));
This bundles up all the javascript from the files but also I would like to bundle the output from my .axd http handler. This returns javascript. However the javascript never gets included in the bundle. If I run the handler in my browser, no issue, javascript is returned.
I am wondering maybe the bundler does not recognize the .axd extension and therefore does not attempt to request the file. Any ideas if this is the case and the work around?
Correct, you can only include files into bundles, it will not make requests to the axd for you. What you can do is manually hit the axd, and save the file to disk and include that into your bundle.
I just wrote a script bundle for resx - you can find the source here
https://github.com/MrAntix/sandbox-resx-script-bundling
In BundleConfig, add your bundle ...
bundles.Add(
new ResxScriptBundle("~/bundles/local")
.Include<JsResources>("app")
);
It creates a model for each resource like this ...
window.resources=window.resources||{};
window.resources.app = {
"HelloWorld": "Hello World, from JSResources.resx"
};
And you can use it in your JS like this ...
$("h1").append(window.resources.app.HelloWorld);
... for example