Bundling and minification in ASP.Net Web API + AngularJS projects

Question

We have several projects at hand in our team but all of them have the same architecture, and recently we decided to implement bundling and minification in all of them.

so we user ASP.Net Web API alongside AngularJS and we don't use ASP.Net MVC, so no Razor or .cshtml.

In our App folder that we use to store AngularJS files, we have this Index.html file that in it we reference our load-js-css.js file, we have this function in load-js-css.js to load CSS files alongside App/main.js:

function loadcssfile(filename, filetype) {
if (filetype == "js") {
    var fileref = document.createElement("script")
    fileref.setAttribute("data-main", "App/main.js")
    fileref.setAttribute("src", filename + "?v=" + version)
}
if (filetype == "css") {
    var fileref = document.createElement("link")
    fileref.setAttribute("rel", "stylesheet")
    fileref.setAttribute("type", "text/css")
    fileref.setAttribute("href", filename + "?v=" + version)
}
if (typeof fileref != "undefined")
    document.getElementsByTagName("head")[0].appendChild(fileref)
}

In main.js we define our paths and also a reference to app.js:

require.config({
baseUrl: "Scripts",
paths: {
    'application': '/App/app',
    'jquery.min': 'kendoUI/js/jquery.min',
    'angular.min': 'kendoUI/js/angular.min',
    .
    .
    .
    .

    'momentJalaali': { deps: ['jquery.min', 'angular.min', 'moment'] },
    'pdfMakeLib': { exports: 'pdfMake' },
    'pdfmake' : {deps: ['pdfMakeLib'], exports: 'pdfmake'}
},
urlArgs: "v=" + ((isDevelopment) ? (new Date()).getTime() : version),
waitSeconds: 0,
deps: ['application']
});

and finally, in app.js we define different states with the reference to AngularJS controllers and HTML files

define(['angularAMD', 'angular-ui-route', 'ui-bootstrap', 'angular-sanitize', 'blockUI', 'animate', 'moment', 'momentJalaali', 'infoWindow', 'buttonValidation', 'textEmail', 'textNumeric', 'windowRedirect', 'dataService', "messageService", 'ncy-angular-breadcrumb', 'helperFactory'], function (angularAMD) {
"use strict";
var baseUrl = "App/views/", defaultOtherwise = 'default';
var app = angular.module("mainModule", ['ui.router', 'blockUI', 'ngSanitize', 'ui.bootstrap', 'ui.router.state', 'ncy-angular-breadcrumb'], ["$breadcrumbProvider", "blockUIConfig", "$stateProvider", "$urlRouterProvider", "$locationProvider", '$provide', function ($breadcrumbProvider, blockUIConfig, $stateProvider, $urlRouterProvider, $locationProvider, $provide) {
    $provide.constant("defaultUrlOtherwise", defaultOtherwise);
    $breadcrumbProvider.setOptions({
        prefixStateName: 'home',
        templateUrl: 'App/template/breadcrumb.html',
    });
    .
    .
    .
    .
    .state('login', angularAMD.route({
        url: '/login',
        controllerUrl: baseUrl + 'security/login/loginController.js',
        views: {
            'login': {
                templateUrl: baseUrl + 'security/login/login.html',
            }
        },
    }))
    .
    .
    .
    .

so it's been more than a week that I'm looking for a good way to enable bundling in our projects but can't find a good practice that fits our projects.is there a good way to do bundling for Web API + AngularJS projects?

And also we can't user .cshtml in our project and without @Render.Scripts we have to use tags that I think it would be a problem due to caching.