I added the bundle in BundleConfig.cs as shown below:
bundles.Add(new ScriptBundle("~/bundles/angular").Include("~/Scripts/angular.min*"));
In the _Layout.cshtml I have the following:
<body>
#RenderBody()
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/angular")
#RenderSection("scripts", required: false)
</body>
</html>
In the network traffic it does not show the angular file.
Bundling in ASP.NET MVC is quite clever in that it understands *.min and when to use or no to use it. So if you do this in your bundle:
bundles.Add(new ScriptBundle("~/bundles/angular").Include("~/Scripts/angular.js"));
In debug-mode, it will send a request for "/scripts/angular.js" and in release-mode it will send a request to "/scripts/angular.min.js"
In order to benefit from this, you should put both the original and the minified file in your scripts folder. That way, when you're debugging you have full access to the uncompressed source and in your production environment, the optimized file will be loaded
you have given incorrect file name
~/Scripts/angular.min*
instead it should be
~/Scripts/angular.js
.min would automatically be added in the production mode\
Bundler not including .min files
in my case the problem was with Global.asax.cs
you need to have
BundleConfig.RegisterBundles(BundleTable.Bundles);
in your Application_Start()
Related
I have a minimal ASP.NET MVC 5 app that was generated via Scaffolding. When I look at the generated _Layout.cshtml file I see a <script> tag toward the bottom of the page that loads jQuery but nowhere in _Layout.cshtm do I see a reference to a jQuery Validation module in a <script> tag.
If I go into Chrome Developer Tools, under the "Sources" tab, I can see that indeed jQuery.validate and jquery.validate.unobtrisuve are loaded! But how can they be loaded if they were not referenced by a <script> tag?
If you look in App_Start BundleConfig.cs you should see reference to:
bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
"~/Scripts/jquery.validate*"));
which defines the jQuery validation script bundle. Certain scaffold pages (for example Login) have:
#section Scripts {
#Scripts.Render("~/bundles/jqueryval")
}
referenced at the bottom of the View.
This is picked up by #RenderSection("scripts", required: false) at the bottom of _Layout (which renders the script if it is defined).
I have a Durandal 2 app based on ASP.NET MVC 5 and Web API, with the initial Index.cshtml (on HomeController) being served through the MVC router. From then on it's all regular html views being handled by the Durandal router.
Anyway, I'm trying to use gulp-useref to concatenate all css and js files. I've got everything working and gulp-useref drops the newly concatenated files and an index.cshtml with the updated script and stylesheet references in a dist folder.
Of course, for the application to work I need the updated index.cshtml back in Views/Home/. I have created a "copy" task with gulp that does just that; it overwrites the original index.cshtml and fixes the paths to the concatenated js and css files.
That works as well, but since useref removes the html comments that mark the spot where it should insert the references to the concatenated files, the process is not repeatable.
Let me illustrate with some code.
In my Index.cshtml I have:
<html>
<head></head>
<body>
<!-- build:js js/lib.js-->
<script src="/bower_components/numeral/languages.js"></script>
<script src="/scripts/bootstrap.js"></script>
<script src="/scripts/typeahead.js"></script>
<script src="/scripts/knockout-bootstrap.js"></script>
<script src="/scripts/knockout-extenders.js"></script>
<!-- endbuild -->
</body>
</html>
This is where gulp-useref will place the updated script reference so it will end up looking like this:
<html>
<head></head>
<body>
<script src="/js/lib.js"></script>
</body>
</html>
As you can see, useref removes the html comments so if I overwrite the original index.cshtml with this file, useref will not know where to place the updated script tag. And if I don't overwrite the original index.cshtml, the application will not be using the concatenated files.
I'm new to gulp so I might be going at this in the completely wrong way, but how can I make sure that my /Views/Home/index.cshtml uses the concatenated files in an automated manner?
Or, alternatively, is there a better approach for what I'm trying to do, namely, get everything ready for deployment?
Here are my relevant gulp tasks, for reference:
gulp.task("optimize-for-deployment", function () {
var assets = $.useref.assets({ searchPath: "./" });
var cssFilter = $.filter("**/*.css");
var jsFilter = $.filter("**/*.js");
return gulp
.src(config.index)
.pipe($.plumber())
.pipe(assets)
.pipe(cssFilter)
.pipe($.csso())
.pipe(cssFilter.restore())
.pipe(jsFilter)
.pipe($.uglify())
.pipe(jsFilter.restore())
.pipe(assets.restore())
.pipe($.useref())
.pipe(gulp.dest(config.appDist));
});
// copy the updated index.cshtml to Views/Home/
gulp.task("copy-for-deployment", ["optimize-for-deployment"], function () {
return gulp.src(config.appDist + "index.cshtml")
.pipe($.replacePath(/js\/lib.js/, "/app/dist/js/lib.js"))
.pipe($.replacePath(/style\/app.css/, "/app/dist/style/app.css"))
.pipe(gulp.dest(config.indexLocation));
});
Don't know if this is 'better' approach or the best solution but you could use something like a template for your index file. So you would have an Index-template.cshtml with al your html comments which you use to create your Index.cshtml every time in your gulp tasks.
This way you can overwrite your Index.cshtml and keep your template with al your html comments.
I am new to .net mvc and trying to do the exact thing Sergi. If you modified the default view location scheme to include your dist folder (How to change default view location scheme in ASP.NET MVC?), would .net know to include the dist folder and compile those .cshtml files?
I have two script bundles defined:
bundles.Add(new ScriptBundle("~/scripts/common").Include(
"~/Scripts/jquery-1.11.1.js",
"~/Scripts/jquery-ui-1.10.4.custom.min.js",
"~/Scripts/jquery.validate.js"));
bundles.Add(new ScriptBundle("~/scripts/sectionCommon").Include(
"~/Scripts/A.js",
"~/Scripts/B.js",
"~/Scripts/C.js"));
I have one set on my master layout page:
#Scripts.Render("~/scripts/common")
And one set on a subset of my pages where it is used:
#Scripts.Render("Scripts/sectionCommon")
So far so good and this works.
When I run my site using debug compilation, the JS files from the first bundle are rendered to the markup as individual script links per file, whereas the second bundle remains as a single minified bundle:
<script src="/siteRoot/Scripts/jquery-1.11.1.js"></script>
<script src="/siteRoot/Scripts/jquery-ui-1.10.4.custom.min.js"></script>
<script src="/siteRoot/Scripts/jquery.validate.js"></script>
<script src="/siteRoot/Scripts/sectionCommon"></script>
Does anybody have any idea why this might be happening? Bit of a pain while debugging.
Figured this out while I was writing the question. Thought I would answer it in case this bites anybody else. The difference between the two was using the tilda to get a site relative url:
#Scripts.Render("~/scripts/common")
#Scripts.Render("Scripts/sectionCommon")
Both of these render out the script as intended, but only the top one (using the site relative URL) was rendering out the individual script references in debug.
Is it possible to force ASP.NET MVC 4 bundle to render links with full domain address?
I mean a bundle like this: ~/bundle/jquery render to http://domain.com/bundle/jquery instead of this one: /bundle/jquery.
UPDATE:
I think I should explain more. By render I mean the rendered url, not the page. e.g. I have a bundle with this key: ~/bundle/jquery. OK. It will be rendered as
<script src="/bundle/jquery" type="text/javascript"></script>
Right? Well, I want this one instead:
<script src="http://sub.domain.com/bundle/jquery" type="text/javascript"></script>
Do you exactly say it "render"?? yes, then ASP.NET MVC 4 renders them as you have asked for.You can notice this by going to the source code of the page RENDERED by a view in ASP.NET MVC 4.0.
You don't have to force it as such , it automatically does it for you...!!
EDITED:
You can do so by deleting Bundle.cs file in the App_Start folder and removing the BundleConfig.RegisterBundles(BundleTable.Bundles); line from Global Application Class. But you will have to add paths to your required files manually. this is cumbersome. Moreover, this will reduce your application's performance as you will be adding the plain HTML on View Page.
I have downloaded MVC4 and trying to work out how the bundling feature works in a standard project. It would seem that having the bundle:
<script src="#System.Web.Optimization.BundleTable.Bundles.ResolveBundleUrl("~/Scripts/js")"></script>
Brings back all the jquery.js files but not the knockout.js files in the included scripts. Why is this? And also what is the _references.js file about and why is the knockout.js file commented out?
If you look into your project Global.asax file, you should find there something like this:
protected void Application_Start()
{
...
BundleTable.Bundles.RegisterTemplateBundles();
}
Now the RegisterTemplateBundles is registering only a predefined subset of scripts:
jquery-*
jquery.mobile*
jquery-ui*
jquery.unobtrusive*
jquery.validate*
MicrosoftAjax.js
MicrosoftMvc.js
modernizr*
AjaxLogin.js
If you want some additional files you could either change RegisterTemplateBundles to EnableDefaultBundles:
protected void Application_Start()
{
...
BundleTable.Bundles.EnableDefaultBundles();
}
Or create your own custom bundle (you can read more about bundling and minification here). You should also know that EnableDefaultBundles has some performance impact.
The _references.js file is used by Visual Studio for JavaScript intellisense. You can learn more from following article:
JavaScript Intellisense in VS11, The _references.js File
tpeczek is correct. Most folks don't use Knockout.js, that's why it's not included by default. Bundling/Minification (BM) has changed considerably for RC and it will be much simpler to add files to bundles. See my Bundling and Minification tutorial
I was able to add a file to the bundle with the following line of code added after the RegisterTemplateBundles()
BundleTable.Bundles.RegisterTemplateBundles();
BundleTable.Bundles.Where(x => x.Path == "~/Scripts/js").First().AddFile("~/scripts/knockout-2.0.0.js");