watch mode for browserify builds
Update any source file and your browserify bundle will be recompiled on thespot.
$ watchify main.js -o static/bundle.js
Now as you update files, static/bundle.js
will be automaticallyincrementally rebuilt on the fly.
The -o
option can be a file or a shell command (not available on Windows)that receives piped input:
watchify main.js -o 'exorcist static/bundle.js.map > static/bundle.js' -d
watchify main.js -o 'uglifyjs -cm > static/bundle.min.js'
You can use -v
to get more verbose output to show when a file was written and how long the bundling took (in seconds):
$ watchify browser.js -d -o static/bundle.js -v610598 bytes written to static/bundle.js (0.23 seconds) at 8:31:25 PM610606 bytes written to static/bundle.js (0.10 seconds) at 8:45:59 PM610597 bytes written to static/bundle.js (0.14 seconds) at 8:46:02 PM610606 bytes written to static/bundle.js (0.08 seconds) at 8:50:13 PM610597 bytes written to static/bundle.js (0.08 seconds) at 8:58:16 PM610597 bytes written to static/bundle.js (0.19 seconds) at 9:10:45 PM
Use watchify
with all the same options as browserify
except that -o
(or--outfile
) is mandatory. Additionally, there are also:
Standard Options: --outfile=FILE, -o FILE This option is required. Write the browserify bundle to this file. If the file contains the operators `|` or `>`, it will be treated as a shell command, and the output will be piped to it. --verbose, -v [default: false] Show when a file was written and how long the bundling took (in seconds). --version Show the watchify and browserify versions with their module paths.
Advanced Options: --delay [default: 100] Amount of time in milliseconds to wait before emitting an "update" event after a change. --ignore-watch=GLOB, --iw GLOB [default: false] Ignore monitoring files for changes that match the pattern. Omitting the pattern will default to "**/node_modules/**". --poll=INTERVAL [default: false] Use polling to monitor for changes. Omitting the interval will default to 100ms. This option is useful if you're watching an NFS volume.
var watchify = require('watchify');
watchify(b, opts)
watchify is a browserify plugin, so it can be applied like any other plugin.However, when creating the browserify instance b
, you MUST set the cache
and packageCache
properties:
var b = browserify({ cache: {}, packageCache: {} });b.plugin(watchify);
var b = browserify({ cache: {}, packageCache: {}, plugin: [watchify]});
By default, watchify doesn't display any output, see events for more info.
b
continues to behave like a browserify instance except that it caches filecontents and emits an 'update'
event when a file changes. You should callb.bundle()
after the 'update'
event fires to generate a new bundle.Calling b.bundle()
extra times past the first time will be much faster dueto caching.
Important: Watchify will not emit 'update'
events until you've calledb.bundle()
once and completely drained the stream it returns.
var fs = require('fs');var browserify = require('browserify');var watchify = require('watchify');var b = browserify({ entries: ['path/to/entry.js'], cache: {}, packageCache: {}, plugin: [watchify]});b.on('update', bundle);bundle();function bundle() { b.bundle() .on('error', console.error) .pipe(fs.createWriteStream('output.js')) ;}
options
You can to pass an additional options object as a second parameter ofwatchify. Its properties are:
opts.delay
is the amount of time in milliseconds to wait before emittingan "update" event after a change. Defaults to 100
.
opts.ignoreWatch
ignores monitoring files for changes. If set to true
,then **/node_modules/**
will be ignored. For other possible values seeChokidar's documentation on "ignored".
opts.poll
enables polling to monitor for changes. If set to true
, thena polling interval of 100ms is used. If set to a number, then that amount ofmilliseconds will be the polling interval. For more info see Chokidar'sdocumentation on"usePolling" and "interval".This option is useful if you're watching an NFS volume.
var b = browserify({ cache: {}, packageCache: {} });// watchify defaults:b.plugin(watchify, { delay: 100, ignoreWatch: ['**/node_modules/**'], poll: false});
b.close()
Close all the open watch handles.
b.on('update', function (ids) {})
When the bundle changes, emit the array of bundle ids
that changed.
b.on('bytes', function (bytes) {})
When a bundle is generated, this event fires with the number of bytes.
b.on('time', function (time) {})
When a bundle is generated, this event fires with the time it took to create thebundle in milliseconds.
b.on('log', function (msg) {})
This event fires after a bundle was created with messages of the form:
X bytes written (Y seconds)
with the number of bytes in the bundle X and the time in seconds Y.
If your custom transform for browserify adds new files to the bundle in a non-standard way without requiring.You can inform Watchify about these files by emiting a 'file' event.
module.exports = function(file) { return through( function(buf, enc, next) { /* manipulating file content */ this.emit("file", absolutePathToFileThatHasToBeWatched); next(); } );};
With npm do:
$ npm install -g watchify
to get the watchify command and:
$ npm install watchify
to get just the library.
rebuilds on OS X never trigger
It may be related to a bug in fsevents
(see #250and stackoverflow).Try the --poll
flagand/or renaming the project's directory - that might help.
watchify swallows errors
To ensure errors are reported you have to add a event listener to your bundle stream. For more information see (browserify/browserify#1487 (comment) and stackoverflow)
Example:
var b = browserify();b.bundle() .on('error', console.error) ...;
- budo – a simple development server built on watchify
- errorify – a plugin to add error handling to watchify development
- watchify-request – wraps a
watchify
instance to avoid stale bundles in HTTP requests - watchify-middleware – similar to
watchify-request
, but includes some higher-level features
MIT