如何在asp.net中捆绑js文件？

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

Answer 1

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.

Answer 2

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

1. use bundle like above post BundleCollection from Justsayno
2. 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!