gulp-nodemon

it's gulp + nodemon + convenience

Install

1$ npm install --save-dev gulp-nodemon

Usage

Gulp-nodemon looks almost exactly like regular nodemon, but it's made for use with gulp tasks.

nodemon([options])

You can pass an object to gulp-nodemon with options like you would in nodemon config.

Example below will start server.js in development mode and watch for changes, as well as watch all .html and .js files in the directory.

1gulp.task('start', function () {
2  nodemon({
3    script: 'server.js'
4  , ext: 'js html'
5  , env: { 'NODE_ENV': 'development' }
6  })
7})

Synchronous Build Tasks

NOTE: This feature requires Node v0.12 because of child_process.spawnSync.

Nodemon is powerful but lacks the ability to compile/cleanup code prior to restarting the application... until now! Most build systems can never be complete without compilation, and now it works harmoniously with your nodemon loop.

{ tasks: [Array || Function(changedFiles)] }

If you want to lint your code when you make changes that's easy to do with a simple event. But what if you need to wait while your project re-builds before you start it up again? This isn't possible with vanilla nodemon, and can be tedious to implement yourself, but it's easy with gulp-nodemon:

1nodemon({
2  script: 'index.js'
3, tasks: ['browserify']
4})

What if you want to decouple your build processes by language? Or even by file? Easy, just set the tasks option to a function. Gulp-nodemon will pass you the list of changed files and it'll let you return a list of tasks you want run.

1nodemon({
2  script: './index.js'
3, ext: 'js css'
4, tasks: function (changedFiles) {
5    var tasks = []
6    changedFiles.forEach(function (file) {
7      if (path.extname(file) === '.js' && !~tasks.indexOf('lint')) tasks.push('lint')
8      if (path.extname(file) === '.css' && !~tasks.indexOf('cssmin')) tasks.push('cssmin')
9    })
10    return tasks
11  }
12})

Events

gulp-nodemon returns a stream just like any other NodeJS stream, except for the on method, which conveniently accepts gulp task names in addition to the typical function.

.on([event], [Array || Function])

1. [event] is an event name as a string. See nodemon events.
2. [tasks] An array of gulp task names or a function to execute.

.emit([event])

1. event is an event name as a string. See nodemon events.

Examples

Basic Usage

The following example will run your code with nodemon, lint it when you make changes, and log a message when nodemon runs it again.

1// Gulpfile.js
2var gulp = require('gulp')
3  , nodemon = require('gulp-nodemon')
4  , jshint = require('gulp-jshint')
5
6gulp.task('lint', function () {
7  gulp.src('./**/*.js')
8    .pipe(jshint())
9})
10
11gulp.task('develop', function () {
12  var stream = nodemon({ script: 'server.js'
13          , ext: 'html js'
14          , ignore: ['ignored.js']
15          , tasks: ['lint'] })
16
17  stream
18      .on('restart', function () {
19        console.log('restarted!')
20      })
21      .on('crash', function() {
22        console.error('Application has crashed!\n')
23         stream.emit('restart', 10)  // restart the server in 10 seconds
24      })
25})

You can also plug an external version or fork of nodemon

1gulp.task('pluggable', function() {
2  nodemon({ nodemon: require('nodemon'),
3            script: 'server.js'})
4})

Bunyan Logger integration

The bunyan logger includes a bunyan script that beautifies JSON logging when piped to it. Here's how you can you can pipe your output to bunyan when using gulp-nodemon:

1gulp.task('run', ['default', 'watch'], function() {
2    var nodemon = require('gulp-nodemon'),
3        spawn   = require('child_process').spawn,
4        bunyan
5
6    nodemon({
7        script: paths.server,
8        ext:    'js json',
9        ignore: [
10            'var/',
11            'node_modules/'
12        ],
13        watch:    [paths.etc, paths.src],
14        stdout:   false,
15        readable: false
16    })
17    .on('readable', function() {
18
19        // free memory
20        bunyan && bunyan.kill()
21
22        bunyan = spawn('./node_modules/bunyan/bin/bunyan', [
23            '--output', 'short',
24            '--color'
25        ])
26
27        bunyan.stdout.pipe(process.stdout)
28        bunyan.stderr.pipe(process.stderr)
29
30        this.stdout.pipe(bunyan.stdin)
31        this.stderr.pipe(bunyan.stdin)
32    });
33})

Using gulp-nodemon with React, Browserify, Babel, ES2015, etc.

Gulp-nodemon is made to work with the "groovy" new tools like Babel, JSX, and other JavaScript compilers/bundlers/transpilers.

In gulp-nodemon land, you'll want one task for compilation that uses an on-disk cache (e.g. gulp-file-cache, gulp-cache-money) along with your bundler (e.g. gulp-babel, gulp-react, etc.). Then you'll put nodemon({}) in another task and pass the entire compile task in your config:

1var gulp = require('gulp')
2  , nodemon = require('gulp-nodemon')
3  , babel = require('gulp-babel')
4  , Cache = require('gulp-file-cache')
5
6var cache = new Cache();
7
8gulp.task('compile', function () {
9  var stream = gulp.src('./src/**/*.js') // your ES2015 code
10                   .pipe(cache.filter()) // remember files
11                   .pipe(babel({ ... })) // compile new ones
12                   .pipe(cache.cache()) // cache them
13                   .pipe(gulp.dest('./dist')) // write them
14  return stream // important for gulp-nodemon to wait for completion
15})
16
17gulp.task('watch', ['compile'], function () {
18  var stream = nodemon({
19                 script: 'dist/' // run ES5 code
20               , watch: 'src' // watch ES2015 code
21               , tasks: ['compile'] // compile synchronously onChange
22               })
23
24  return stream
25})

The cache keeps your development flow moving quickly and the return stream line ensure that your tasks get run in order. If you want them to run async, just remove that line.

Using gulp-nodemon with browser-sync

Some people want to use browser-sync. That's totally fine, just start browser sync in the same task as nodemon({}) and use gulp-nodemon's .on('start', function () {}) to trigger browser-sync. Don't use the .on('restart') event because it will fire before your app is up and running.