title: Uncaught ReferenceError: require is not defined when bundling js files
body: <p>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).</p>
  
  <p>site.min.js:81109 Uncaught ReferenceError: require is not defined</p>
  
  <p>Here is the bower.json file</p>
  
  <pre><code>{
     "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"
   }
  }
  </code></pre>
  
  <p>and my gulpfile.js</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>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"]);</code></pre>
  </div>
  </div>
  </p>
  
  <p>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</p>
  
  <p>require('./dist/ui-bootstrap-tpls');</p>
  
  <p>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. </p>