How can I browserify every .js file in a directory with Gulp?

Question

I'm using Gulp to Browserify a specific file right now ( /src/js/main.js ) which will create a single bundle, but I want to watch the entire src/js directory and bundle each additional .js file that exists with main.js .

So if I had a directory with like:

main.js , reset_password.js , auth_login.js , it'd browserify each one separately.

var gulp = require('gulp');
var rename = require('gulp-rename');
var less = require('gulp-less');
var shell = require('gulp-shell');
var source = require('vinyl-source-stream');
var browserify = require('browserify');

gulp.task('js', ['nunjucks'], function () {
  return (
    browserify(['./src/js/*.js'])
      .bundle()
        .on('error', function (err) {
          console.log(err.message);
        })
      .pipe(rename({
          suffix: '.min.js'
        }))
      .pipe(gulp.dest('./public/js'))
  );
});

Will throw an error that says:

Cannot find module '/src/js/**.js'

It will work if I specify each file, but it won't do globbing. Can Browserify even watch an entire directory?

Answer 1

You should call browserify by specifying only one unique file. This is the entry point to all the other files.

browserify(['./src/js/main.js'])

In this file do :

require('./reset_password')

And in reset_password, add something like :

module.exports = function(){.... // all the code is here