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

score 3 · Answer 1 · answered Jul 18 '16 at 02:39

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.

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? — mko, Apr 13 '19 at 15:04
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) — sethreidnz, May 16 '19 at 03:59

score 0 · Answer 2 · answered Jul 18 '16 at 02:49

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!

How to bundle js files in asp.net?

2 Answers2