Uncaught ReferenceError: require is not defined when bundling js files - gulp

Question

I am getting this error when I am minifying and bundling some js libraries with a gulp script (I am replicating the Hot Towel Angular nuget package from John Pappa).
site.min.js:81109 Uncaught ReferenceError: require is not defined
Here is the bower.json file
{
"name": "chainmanagerprovider",
"private": true,
"dependencies": {
"jQuery": "^3.1.0",
"jquery-validation": "^1.15.1",
"jquery-validation-unobtrusive": "^3.2.6",
"modernizr": "^3.3.1",
"bootstrap": "^3.3.7",
"respond": "respond-minmax#^1.4.2",
"angular": "^1.5.8",
"angular-animate": "^1.5.8",
"angular-mocks": "^1.5.8",
"angular-sanitize": "^1.5.8",
"angular-ui-router": "^0.3.1",
"moment": "^2.14.1",
"spin": "^1.1.6",
"toastr": "^2.1.3",
"font-awesome": "font-awsome#^4.6.3",
"jquery": "^3.1.0",
"angular-route": "^1.5.8",
"angular-bootstrap": "^2.1.2",
"install": "^1.0.4",
"spin.js": "spin-js#^2.0.1",
"ui-bootstrap": "^2.1.2"
},
"resolutions": {
"jquery": "3.1.0"
}
}
and my gulpfile.js
var gulp = require('gulp'),
concat = require("gulp-concat"),
cssmin = require("gulp-cssmin"),
debug = require("gulp-debug"),
uglify = require("gulp-uglify"),
filter = require("gulp-filter"),
mainBowerFiles = require('main-bower-files');
var flatten = require('gulp-flatten');
var paths = {};
paths.baseReleaseFolder = "Bundle";
paths.baseJSReleaseFile = "js/site.min.js";
paths.baseCSReleaseFile = "css/site.min.css";
paths.jsSource = mainBowerFiles()//this gets all your bower scripts in an array
.concat([
"Scripts/spcontext.js",//generated by MY typescript compiler
"!/Scripts", //this is an exclude
"!**/*.min.js" //also an exclude
]);
gulp.task("min:js", function () {
var jsFilter = filter('**/*.js', { restore: true });//extra file safty incase my glob is getting non js files somehow
return gulp
.src(paths.jsSource) //this is the 'glob' IE the file selector
.pipe(jsFilter) //enforce my filter from above (gulp-filter)
.pipe(debug()) //useful to output what files are in use (gulp-debug)
.pipe(uglify()) //min and ugilfy files on the way to next step (gulp-uglify)
.pipe(concat(paths.baseReleaseFolder + "/" + paths.baseJSReleaseFile)) //this takes all the files in the glob and creates a single file out of them in app/site.min.js
.pipe(gulp.dest(".")) //write the final site.min.js to its location
.pipe(jsFilter.restore); //not sure but all filter examples do this.
});
gulp.task("min:css", function () {
var cssFilter = filter('**/*.css', { restore: true });
return gulp
.src(['bower_components/**/*.css', 'Content/**/*.css', "!bower_components/**/*.min.css", '!Content/**/*.min.css'])
.pipe(flatten())
.pipe(debug())
.pipe(cssmin())
.pipe(concat(paths.baseReleaseFolder + "/" + paths.baseCSReleaseFile))
.pipe(gulp.dest("."))
.pipe(cssFilter.restore);
});
gulp.task("fontawesome", function () {
return gulp
.src('bower_components/font-awesome/fonts/*')
.pipe(flatten())
.pipe(debug())
.pipe(gulp.dest("Bundle/fonts"))
});
gulp.task("bundle", ["min:css", "min:js", "fontawesome"]);
The script does all the bundling as expected and the files are there. When I run the page, I get the above error at this line
require('./dist/ui-bootstrap-tpls');
I am using Angular bootstrap and it seems I need an additional step to handle this library. I have read around on browserify, but I am having a trouble grasping what I need to do to my script.