Browserify Sample

gulp-browserify-sample.js

// Paths is a nodejs global object with path url string we're using to specify our bundle
const gulp = require('gulp');
const browserify = require('browserify');
const gutil = require('gulp-util');
const source = require('vinyl-source-stream'); // Convert our stream to an output vinyl
const sourcemaps = require('gulp-sourcemaps'); // We need to include the sourcemaps for our files
const ngAnnotate = require('browserify-ngannotate'); // e.g Browserify plugin to make sure Angular dependencies will work on minification
const buffer = require('vinyl-buffer'); //  This finishes what source stream started

/* BROWSERIFY SETTINGS */
const browserifySettings = {
  entries: paths.jsEntryPoint,
  debug: true, // this allows sourcemaps 
  paths: [paths.jsDest],
  transform: [ngAnnotate] // Plugins - Allow you transform your code before bundling ...you can also use typescript or coffeescript with transforms
}
/* BROWSERIFY TASK */
gulp.task('browserify', () => {
    const b = browserify(browserifySettings) // import our settings
    b.plugin('minifyify', { output: helpers.paths.dist + "/bundle.js" }) // minifyify minifies and adds sourcemaps to your code.
     .ignore('FB').ignore('Stripe'); // ignore global variables that are lazy loaded - google for gmaps would work as well
  
    return b.bundle()
    .pipe(source('bundle.js'))
    .pipe(buffer())
    .pipe(sourcemaps.init({ loadMaps: true }))
    .on('error', gutil.log)
    .pipe(sourcemaps.write('./'))
    .pipe(gulp.dest(helpers.paths.dist));
  });

/ ************ hypothetical  app.js *********************** / 

var angular = require('angular'); // require your node_modules - it just knows

angular.module('myApp', [require('angular-ui-router'),  require('angular-messages')]);
require('./components'); // you just module.exports your code, just like nodejs
require('./routes.js');