Recursively crawl and scan directories, browserifying/watchifying multiple main files into an output directory
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
example
test
.babelrc
.eslintrc.js
.gitignore
README.md
index.js
package-lock.json
package.json

README.md

browserify-crawl

Recursively crawls a directory and browserifies, watches, source-maps, displays errors, minifies, and gzips multiple files based on filename matching. This is a pre-configured utility for developer convenience that is still very customizable.

const bcrawl = require('browserify-crawl')
const emitter = bcrawl({
   fileName: 'page.js',
   source: 'client/js',
   dest: 'public/js',
   watch: true,
   compress: true,
   browserify: {
     transforms: ['babelify']
   }
})

console.log('finding files')
emitter.on('build', (files) => console.log('finished initial build of', files.length, 'files'))
emitter.on('update', (file) => console.log('detected update on', file))
emitter.on('compile', (file) => console.log('compiled', file))
emitter.on('compress', (file) => console.log('compressed', file))
emitter.on('error', (err) => console.log('error', err.message))

The above will find all files named page.js in the client/js directory, even nested ones. It will then recreate a mirror directory structure in public/js with all the compiled files.

For example, if you have client/js/page.js and client/js/dashboard/page.js, then the compiler will create public/js/page.js and public/js/dashboard/page.js, which will be the built versions of the files. The compiler will also create public/js/page.js.map, public/js/page.js.gz, public/js/dashboard/page.js.map, and public/js/dashboard/page.js.gz.

bcrawl(options)

The options object can have these properties:

  • source: path of the input directory containing all your mainfiles (which may be in nested directories). Required.
  • dest: path of your output directory, typically public/js, dest, etc. Required.
  • fileName: name of the main-file(s) that you want to compile. Defaults to page.js. These are the root files that you actually want to include in your html in a script element.
  • browserify: an object of browserify options from the browserify api
  • watch: whether to run watchify on each file to recompile on any changes
  • compress: whether to uglify & gzip the compiled file (slower)
  • unassertify: whether to run unassertify (slower)
  • commonShakeify: whether to run common-shakeify (slower)
  • uglifyify: whether to run uglifyify (slower)

The return value is an event emitter that allows you to listen to the following events:

  • compile: a file has finished compling. Callback receives the full file path.
  • build: the full set of files have finished the initial build. Callback receives an array of all file paths
  • update: a file has been updated but not yet compiled
  • compress: a file has finished being minified and gzipped
  • error: an error has been caught, most likely a browserify parse error

Sample development watcher

const bcrawl = require('browserify-crawl')

const emitter = bcrawl({
  source: process.argv[2] || './client/js',
  dest: './public/client/js',
  compress: false,
  watch: true,
  fileName: 'page.js',
  browserify: {
    debug: true,
    paths: ['./client'],
    insertGlobals: true // minor speed-up
  }
})

const logTime = x => console.log(`[${new Date().toLocaleTimeString()}]`, x)
const time = new Date()
logTime('( ゚ヮ゚) compiling all files')
emitter.on('build', (files)  => logTime('(° ͜ʖ °) finished building ' + files + ' files in ' + (new Date() - time) / 1000 + ' seconds... now watching for changes'))
emitter.on('compile', (file) => logTime('compiled ' + file))
emitter.on('update', (file)  => logTime('updated  ' + file))
emitter.on('error', (err)  => logTime('error  ' + err.message))

Sample production builder

const bcrawl = require('browserify-crawl')

const emitter = bcrawl({
  source: process.argv[2] || './client/js',
  dest: './public/client/js',
  compress: true,
  watch: false,
  fileName: 'page.js',
  browserify: {
    transform: 'es2040',
    paths: ['./client']
  }
})

const logTime = x => console.log(`[${new Date().toLocaleTimeString()}]`, x)
const time = new Date()
logTime('( ゚ヮ゚) compiling all files')
emitter.on('build', (files)  => logTime('(° ͜ʖ °) finished building ' + files + ' files in ' + (new Date() - time) / 1000 + ' seconds!'))
emitter.on('compile', (file) => logTime('compiled ' + file))
emitter.on('error', (err)  => logTime('error  ' + err.message))