I am using Mvc 4 project from Internet Application template. Why bundle feature does not enabled by default or am I missing something?
There is no such methods like this in Mvc4 as mentioned by other post:
BundleTable.Bundles.RegisterTemplateBundles();
BundleTable.Bundles.EnableDefaultBundles();
Update: This how to enable bundle in debug mode
BundleTable.EnableOptimizations = true;
after registering bundles.
Bundles are registered and enabled by default. When you run in Release mode (debug="false") in your web.config the #Script.Render helper will concatenate and minify the resources into a single file. If you run in Debug mode then each script will be rendered separately.
I run into a similiar issue and my solution is this:
public class bundleConfig
{
public static void RegisterBundles(BundleCollection bundles)
{
// bundle as usual
#if(!DEBUG)
BundleTable.EnableOptimizations = true;
#endif
}
}
This way, when I launch it in Release mode, it does minification and bundling but if I launch it in Debug mode, it doesn't.
Related
I'm working on an ASP.NET Core app that I would love to publish as a NuGet package that you can add to any Core web project. The app is actually entirely confined to an area (i.e., /Areas/MyArea) in the project, including controllers, views, service classes, models, views, etc., except for a few pieces. Really, these are the pieces that I'd love to magically add to an existing web app:
The area and everything in it
Its CSS and JS in wwwroot/lib/myapp
Entries in the Startup class
MyApp.json in the root
I know NuGet will restore the package dependencies, but I'm not sure how it would also consider the client-side packages.
Any suggestions? Is NuGet the wrong tool for this?
currently afaik it is not possible to deliver files into the web app from a nuget package. I think there is some discussion and work going on about making that possible in the future.
The way I'm handling that in my projects is to embed the views and the needed static js and css resources which is done like this in project.json:
"buildOptions": {
"embed": [ "Views/", "js/", "css/**" ]
},
I created a controller to serve my static resources:
public class cscsrController : Controller
{
private ContentResult GetContentResult(string resourceName, string contentType)
{
var assembly = typeof(cscsrController).GetTypeInfo().Assembly;
var resourceStream = assembly.GetManifestResourceStream(resourceName);
string payload;
using (var reader = new StreamReader(resourceStream, Encoding.UTF8))
{
payload = reader.ReadToEnd();
}
return new ContentResult
{
ContentType = contentType,
Content = payload,
StatusCode = 200
};
}
[HttpGet]
[AllowAnonymous]
public ContentResult bootstrapdatetimepickercss()
{
return GetContentResult(
"cloudscribe.Core.Web.css.bootstrap-datetimepicker.min.css",
"text/css");
}
[HttpGet]
[AllowAnonymous]
public ContentResult momentwithlocalesjs()
{
return GetContentResult(
"cloudscribe.Core.Web.js.moment-with-locales.min.js",
"text/javascript");
}
}
then I link to the controller action in the views where I need to load the js and/or css.
To make the embedded views work I created an extension method of RazorViewEngineOptions:
public static RazorViewEngineOptions AddEmbeddedViewsForCloudscribeCore(this RazorViewEngineOptions options)
{
options.FileProviders.Add(new EmbeddedFileProvider(
typeof(SiteManager).GetTypeInfo().Assembly,
"cloudscribe.Core.Web"
));
return options;
}
and this must be called from ConfigureServices in the web app Startup like this:
services.AddMvc()
.AddRazorOptions(options =>
{
options.AddEmbeddedViewsForCloudscribeCore();
})
;
this technique should work the same for areas. Note that one cool thing is that users can download the views and install them locally and that will override the use of the embedded views making it easy to customize some or all views. By overriding the views it is also possible to then manually install the js and css locally if desired and change the views to link to those local files if customization is needed. The end result is my nuget has everything it needs so there is just some startup configuration to get things working.
Years later, this is possible in ASP.NET Core > v2.x, by using a Razor class library.
How to manage .min files generated by grunt-uglify and "debug" version?
If I set
BundleTable.EnableOptimizations = true;
or at web.config
<compilation debug="false" />
apparently the bundle concat all files by itself and don't use the min files generated by grunt.
All debug version has their own minify version at the same folder ex:
Folder A
testA.js
testA.min.js
...
Folder B
testB.js
testB.min.js
...
PS: I'm not referencing minified files in bundleConfig.cs.
What is the best solution to handle it? I need to use ONLY minified files generated by GRUNT at the release moment, and still using debug version when in development.
BundleTable.EnableOptimizations = true;
This code works only if you're using BundleConfig.cs
I think that the best way for you is to create a custom UrlHelper that can build JS scripts url according to if you're in debug mode or not (this is pseudo-code) :
public static class UrlHelper
{
public static string JsScript(this UrlHelper urlHelper, string baseFileName) {
return HttpContext.Current.IsDebuggingEnabled
? urlHelper.Content(baseFileName + '.js')
: urlHelper.Content(baseFileName + '.min.js');
}
}
And for example, if you want to use it in your Razor view :
<script src="#Url.JsScript("~/js/folderA/testA")"></script>
I am implementing the bundling and minification in MVC4 but its not working when i deploy on IIS server. i used below code in my BundleConfig.cs
public static void RegisterBundles(BundleCollection bundles)
{
bundles.Add(new StyleBundle("~/Content/styles/siteCss").Include("~/Content/styles/reset.css"));
bundles.Add(new ScriptBundle("~/siteJsCommon").Include("~/Scripts/html5.js",
"~/Scripts/jquery.js",
"~/Scripts/jquery-migrate-1.1.1.js",
"~/Scripts/jquery-ui-1.10.3.custom.js",
"~/Scripts/carousel.js",
"~/Scripts/template.js",
"~/Scripts/jquery.validate.js",
"~/Scripts/additional-methods.js",
"~/Scripts/function.js"));
BundleTable.EnableOptimizations = true;
}
Even i checked in my web.config. it seems fine.
<compilation debug="false" targetFramework="4.5" />
can anyone tell me where i am doing mistake.
is it possible to enable bundle only?
Thanks
ashu
There are built-in no configs/options that allow you to enable bundling without minification.
However, Bundles (Script or Style) use IBundleTransform : Microsoft.Web.Optimisation include two defaults transform type JsMinify and CssMinify which is used by ScriptBundle and StyleBundle respectively. However we can create our own custom transform type to process references as per our need or even better do not use IBundleTransform.
So, to enable bundling without Minification we could try this :
//somewhere after all bundles are registered
foreach (var bundle in bundles)
{
bundle.Transforms.Clear();
}
You need to register above created bundles with in Application_Start event of Global.asax like as
protected void Application_Start()
{
RegisterBundles(BundleTable.Bundles);
// Other Code is removed for clarity
}
Bundling and minification doesn't work in debug mode. So to enable this features you need to add below line of code with in Application_Start event of Global.asax.
protected void Application_Start()
{
BundleConfig.RegisterBundles(BundleTable.Bundles);
//Enabling Bundling and Minification
BundleTable.EnableOptimizations = true;
// Other Code is removed for clarity
}
I am using MVC4 and have added Bootstrap and Font Awesome via nuget.
I can see how Bootstrap gets bundled in via BootstrapBundleConfig.cs (which was added by the nuget package) below:
public static void RegisterBundles()
{
BundleTable.Bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include("~/Scripts/bootstrap*"));
BundleTable.Bundles.Add(new StyleBundle("~/Content/bootstrap").Include("~/Content/bootstrap.css", "~/Content/bootstrap-responsive.css"));
}
I have the following questions:
For font-awesome, I don't see similar bundling code to the above for registering the required css files, is there any, or do i just link to the stylesheet in the content directory <link href="~/Content/font-awesome.min.css" rel="stylesheet" /> - what is the proper way?
For bootstrap, if I do not want a responsive layout, would I just comment out the bootstrap-responsive.css from Include("~/Content/bootstrap.css", "~/Content/bootstrap-responsive.css"))?
You can read more about how bundling works on the asp.net site.
It seems that the BootStrap nuget package has made some bundles for you. You could modify this to include Font Awesome in the existing bundle, or make it it's own bundle
e.g.
public static void RegisterBundles()
{
BundleTable.Bundles
.Add(new ScriptBundle("~/bundles/bootstrap")
.Include("~/Scripts/bootstrap*"));
// Either add it to the existing bundle
BundleTable.Bundles
.Add(new StyleBundle("~/Content/bootstrap")
.Include("~/Content/bootstrap.css",
"~/Content/bootstrap-responsive.css",
"~/Content/font-awesome.css"));
// Or make it it's own bundle
BundleTable.Bundles
.Add(new StyleBundle("~/Content/font-awesome")
.Include("~/Content/font-awesome.css"));
}
Then, you need to make sure that your _layout.cshtml renders these bundles (the Bootstrap nuget may not have done this for you).
e.g.
#Styles.Render("~/Content/bootstrap")
// Or, if you made it it's own bundle
#Styles.Render("~/Content/font-awesome")
If you don't want to include ~/Content/bootstrap-responsive.css in your bundle, simple delete this string from the Include method.
I have few JS files which i am trying to Bundle using MVC4, the code is as follows:-
public static void RegisterBundles(BundleCollection bundles)
{
//Global App Items go here.
bundles.Add(new ScriptBundle("~/Scripts/modernizr")
.Include("~/Scripts/modernizr-*"));
bundles.Add(new ScriptBundle("~/bundles/lib")
.Include(
"~/Scripts/jquery.js",
"~/Scripts/jquery.unobtrusive*",
"~/Scripts/jquery.validate*",
"~/Scripts/jquery-ui*",
"~/Scripts/jquery.tablesorter.js"));
bundles.Add(new StyleBundle("~/content/bootstrap")
.Include("~/Content/bootstrap.css"));
var lessBundle = new Bundle("~/content/myApp").Include(
"~/Content/jqueryMultiSelect.less",
"~/Content/scrollbars.css");
lessBundle.Transforms.Add(new LessTransform());
lessBundle.Transforms.Add(new CssMinify());
bundles.Add(lessBundle);
BundleTable.EnableOptimizations = true;
}
Now, when i see my console in Firefox, I can see my Response as Expected. But when same i do it in Chrome, the bundled file is broken.
Broken may be a non-technical term, What i mean by broken is :-
The file is incomplete....
Please let me know, if i need to provide more detail.
Its actually the display issue.
In chrome the js file length is limited, so does not display completely.
Try to open that file in a new tab, you will see the entire content.
In Firefox, it prompts the user to open in a new tab to see the complete content.