Skip to content

Combines a static webserver with a file watcher to automatically rebuild and refresh your web app

License

Notifications You must be signed in to change notification settings

cody-greene/rum

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

39 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

rum [<static_dir>] <outfile> [-- <browserify>]
  Watchify plus static file server plus auto-reload.

Options:
  <static_dir>  Directory of static files to serve, images/fonts
                If omitted, the server is disabled

  <outfile>     Required. Where to dump the browserify bundle

  <browserify>  Arguments after the '--' will be passed along to browserify

  --exec, -x    Shell command to run on each update before browserify,
                and before reload. Will capture any preceeding
                --watch arguments, which are not already captured by
                another --exec. Can use this multiple times.

  --watch, -w   Additional glob pattern to monitor for changes.
                Can use this multiple times. Position is important.
                Will apply to the next --exec argument or to the
                browserify watcher if one is not found.

  --port, -p    Bind server to this [address:]port instead of 0.0.0.0 and
                and random port

  --router, -r  Redirect all requests to this path but keep the
                displayed url unchanged. Use this if you've got
                client-side routing and want to avoid 404s.

  --version, -v Show version number

Basic usage:
  rum dist dist/bundle.js -- src/index.js
Watch scss:
  rum -w 'src/**/*.scss' -x 'make dist/bundle.css' dist dist/bundle.js -- src/index.js
More browserify options:
  rum dist dist/bundle.js -- src/index.js -t babelify -t [envify purge]

You can also listen for reload events in your browser bundle and do something special that depends on the file name. For example, you can hot reload stylesheets like this:

// $ rum dist dist/index.js -w 'src/**/*.scss' -x 'make dist/bundle.css' -- src/hot-css.js src/app.js

// src/hot-css.js
require('rum').on('reload', function (files) {
  for (let index = 0; index < files.length; ++index) {
    if (!/\.(scss|sass|less|css)$/.test(files[index])) {
      return window.location.reload(true)
    }
  }

  // Only the css was changed. Time for hot reload!
  reloadCSS('index.css')
})

/**
 * Reload just the css bundle <link rel="stylesheet" href="...">
 * without refreshing the whole page
 */
function reloadCSS(href) {
  let links = document.getElementsByTagName('link')
  let index = links.length
  let cur = null
  while (cur = links[--index]) {
    if (cur.getAttribute('href') === href) {
      cur.href = ''
      cur.href = href
      console.warn('reloaded ' + href)
      return
    }
  }
}

Using VIM?

You may need to add set backupcopy=yes to your vimrc. The default method of saving files does not play nicely with filewatchers like chokidar.

About

Combines a static webserver with a file watcher to automatically rebuild and refresh your web app

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published