How to bundle js files in asp.net?

Question

I have a angular application with lot of js files , how can I bundle all those files.

Every where I see in web , they suggest to use BundleConfig to bundle js files but I'm using empty web application template in asp.net .

How to bundle js files in an order so that no conflicts would appear and there would be no problem in picking absolute paths and relative paths

sethreidnz · Accepted Answer · 2016-07-18 02:39:40Z

3

How about create a new project that is a full MVC project (select MVC as the tempalte not 'empty'. Then look under the App_Start/BundleConfig.cs, create that exact file and register it as the default project does in the global.asax.cs?

global.asax.cs:

BundleConfig.RegisterBundles(BundleTable.Bundles);

App_Start/BundleConfig.cs

using System.Web;
using System.Web.Optimization;

namespace WebApplication1
{
    public class BundleConfig
    {
        // For more information on bundling, visit http://go.microsoft.com/fwlink/?LinkId=301862
        public static void RegisterBundles(BundleCollection bundles)
        {
            bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                        "~/Scripts/jquery-{version}.js"));

            bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                        "~/Scripts/jquery.validate*"));

            // Use the development version of Modernizr to develop with and learn from. Then, when you're
            // ready for production, use the build tool at http://modernizr.com to pick only the tests you need.
            bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                        "~/Scripts/modernizr-*"));

            bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
                      "~/Scripts/bootstrap.js",
                      "~/Scripts/respond.js"));

            bundles.Add(new StyleBundle("~/Content/css").Include(
                      "~/Content/bootstrap.css",
                      "~/Content/site.css"));
        }
    }
}

To be honest though. I would use a Node based tool like webpack or gulp to do this. You CAN use bundles but they are not as powerful and you miss out on a lot of things you could do in a front-end build. It would help a lot more in terms of the correct load order for example.

answered Jul 18, 2016 at 2:39

sethreidnz

6556 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

mko Over a year ago

You CAN use bundles but they are not as powerful and you miss out on a lot of things you could do in a front-end build. For example?

sethreidnz Over a year ago

The ability to use future JavaScript features now, use css pre-processors, linting tools, the list goes on. I think that bundling on the server like this is by now not considered best practice (especially considering the latest .NET core templates use nodejs builds for the javscript)

Chinh Vo Wili · Accepted Answer · 2016-07-18 02:49:14Z

0

In common, we have 2 ways to bundle AnguarJS/ASP.NET:

use bundle like above post BundleCollection from Justsayno
Use compress JS tool like grunt or gulp. Sample. https://github.com/MarlabsInc/webapi-angularjs-spa OR https://github.com/dchill72/NpmBowerGulpSample

Hope it help!

answered Jul 18, 2016 at 2:49

Chinh Vo Wili

813 bronze badges

Collectives™ on Stack Overflow

How to bundle js files in asp.net?

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related