Gulp Watch - gulp-nodemon - App崩溃

Question

I'm trying to set up Gulp to watch 1 thing: server's source. Upon source update, the server node script will start over & client browser will refresh.

I believe I need gulp-nodemon for the server, while browser-sync for the client.

The server's script is executed by: node src\\babel.js
The script works when ran that way, but fails through my config for Gulp.

Is there something I am doing wrong?

This is my task script:

var gulp = require('gulp');
var browserSync = require('browser-sync');
var nodemon = require('gulp-nodemon');



gulp.task('default', ['watchServer', 'watchClient']);

gulp.task('watchServer', function() {
    gulp.watch('src/**', function () {
        nodemon({ // called upon update
            script: 'src/babel.js',   // I have tried both / & \\
        })
    });

    nodemon({ // called on start
        script: 'src/babel.js',   // I have tried both / & \\
    })
});

gulp.task('watchClient', function() {
    browserSync({
        open: 'external',
        host: '████████',
        port: 80,
        ui: false,
        server: {
            // We're serving the src folder as well
            // for sass sourcemap linking
            baseDir: ['src']
        },
        files: [
         'src/**'
        ]
    });
});

Log:

> gulp

[02:28:04] Using gulpfile B:\Test Server\gulpfile.js
[02:28:04] Starting 'watchServer'...
[02:28:04] Finished 'watchServer' after 19 ms
[02:28:04] Starting 'watchClient'...
[02:28:04] Finished 'watchClient' after 27 ms
[02:28:04] Starting 'default'...
[02:28:04] Finished 'default' after 9.66 μs
[02:28:04] [nodemon] 1.7.1
[02:28:04] [nodemon] to restart at any time, enter `rs`
[02:28:04] [nodemon] watching: *.*
[02:28:04] [nodemon] starting `node src\babel.js`
[BS] Access URLs:
 -----------------------------------
    Local: http://localhost:80
 External: http://████████:80
 -----------------------------------
[BS] Serving files from: src
[BS] Watching files...
events.js:141
      throw er; // Unhandled 'error' event
      ^

Error: listen EADDRINUSE :::80
    at Object.exports._errnoException (util.js:837:11)
    at exports._exceptionWithHostPort (util.js:860:20)
    at Server._listen2 (net.js:1231:14)
    at listen (net.js:1267:10)
    at Server.listen (net.js:1363:5)
    at B:/Test Server/src/app/app.jsx:17:7
    at Object.<anonymous> (B:/Test Server/src/app/app.jsx:41:2)
    at Module._compile (module.js:434:26)
    at normalLoader (B:\Test Server\node_modules\babel-core\lib\api\register\node.js:199:5)
    at Object.require.extensions.(anonymous function) [as .jsx] (B:\Test Server\node_modules\babel-core\lib\api\register\node.js:216:7)
[02:28:05] [nodemon] app crashed - waiting for file changes before starting...

Answer 1

You don't need to watch the server file with gulp since nodemon will automatically restart when it changes, try something like this in your config

gulp.task('watchServer', function() {
    // remove the gulp.watch entry

    nodemon({ // called on start
        script: 'src/babel.js',   // I have tried both / & \\
        ext: 'js',
        watch: ['src/babel.js']
    })
});

There also seems to be something else running on port 80 (this is the default port for apache) so it might help to change the port browsersync is running on to something like 4000

If your node server is running on let's say port 3000 you will need to proxy it with browsersync for example.

gulp.task('watchClient', function() {
    browserSync({
        open: 'external',
        host: '████████',
        proxy: '[YOURHOST]:3000'
        port: 4000,
        ui: false,
        // this entry will most likely need to be removed
        // if you are using something like express as a static server
        server: {
            // We're serving the src folder as well
            // for sass sourcemap linking
            baseDir: ['src']
        },
        files: [
         'src/**'
        ]
    });
});