Node.js — автоматическое обновление в разработке

На самом деле вам не нужно использовать gulp, чтобы это работало.

а) перезапустить мой сервер при изменении кода на стороне сервера

Установите nodemon глобально, используя npm i -g nodemon, затем в папке приложения выполните nodemon или nodemon ${index-file-of-your-app}.

б) обновить браузер при изменении кода на стороне клиента.

Используйте браузер или веб-пакет. Я предпочитаю использовать веб-пакет; вам может понадобиться немного узнать о конфигурации, но хорошая вещь с webpack заключается в том, что вам не нужно его обновлять. Как только изменения будут найдены, они автоматически отразятся в браузере. https://github.com/webpack/docs/wiki/hot-module-replacement-with-webpack

Вы можете перезагружать в браузере как внешние, так и внутренние изменения, используя вместе пакеты «livereload», «connect-livereload» и «nodemon». Кроме того, таким образом вам не нужны Gulp или Grunt. Вот как пакеты работают вместе:

• livereload открывает высокий порт и уведомляет браузер об измененных общедоступных файлах
• connect-livereload обезьяна исправляет каждую обслуживаемую HTML-страницу фрагментом, который подключается к этому высокому порту
• Затем nodemon используется для перезапуска сервера на измененных внутренних файлах.

Настройте livereload в Express

Настройте Express для запуска сервера livereload, наблюдающего за общедоступным каталогом, и проверки связи с браузером во время перезапуска, вызванного nodemon:

const livereload = require("livereload");
const connectLivereload = require("connect-livereload");

// open livereload high port and start to watch public directory for changes
const liveReloadServer = livereload.createServer();
liveReloadServer.watch(path.join(__dirname, 'public'));

// ping browser on Express boot, once browser has reconnected and handshaken
liveReloadServer.server.once("connection", () => {
  setTimeout(() => {
    liveReloadServer.refresh("/");
  }, 100);
});

const app = express();

// monkey patch every served HTML so they know of changes
app.use(connectLivereload());

Запустите Express с помощью nodemon

Затем вы запустите сервер с помощью nodemon, например, с выделенным сценарием наблюдения, запустив npm run watch.

Ключевым моментом здесь является игнорирование общедоступного каталога, за которым уже следит livereload. Вы также можете настроить файлы с расширениями не по умолчанию, такими как мопс и усы, для просмотра.

"scripts": {
  "start": "node ./bin/www",
  "watch": "nodemon --ext js,pug --ignore public"
},

Вы можете прочитать более подробное объяснение в "Обновить внешние и внутренние изменения в браузере с Express, LiveReload и Nodemon."

@mateeyow прав.

Но если вы хотите, чтобы браузер перезагружался автоматически, вам также нужен плагин livereload.

Включить webpack-hot-replacement только для замены кода в памяти браузера, livereload-plugin перезагрузить его.

См., например, рок: https://github.com/orange727/rock/blob/master/app/templates/webpack/webpack.make.js#L255

Как только:

webpackConfig.plugins: [
  new webpack.HotModuleReplacementPlugin(),
  new LiveReloadPlugin({
    appendScriptTag: true,
    port: config.ports.livereload,
})];

Возможно, мне не хватает некоторого контекста (например, я не уверен, что представляет собой input), однако я думаю, что модуль npm reload может решить вашу проблему. Вот пример со страницы пакета npm:

var express = require('express')
  , http = require('http')
  , path = require('path')
  , reload = require('reload')
  , bodyParser = require('body-parser')
  , logger = require('morgan')

var app = express()

var publicDir = path.join(__dirname, '')

app.set('port', process.env.PORT || 3000)
app.use(logger('dev'))
app.use(bodyParser.json()) //parses json, multi-part (file), url-encoded  

app.get('/', function(req, res) {
  res.sendFile(path.join(publicDir, 'index.html'))
})

var server = http.createServer(app)

//reload code here 
//optional reload delay and wait argument can be given to reload, refer to [API](https://github.com/jprichardson/reload#api) below 
reload(server, app, [reloadDelay], [wait])

server.listen(app.get('port'), function(){
  console.log("Web server listening on port " + app.get('port'));
});

Ошибка EADDRINUSE обычно возникает из-за уже открытого соединения на указанном порту. Вероятно, это связано с тем, что предыдущий экземпляр соединения не был правильно закрыт при перезапуске приложения.

Взгляните на эту суть и, в частности, попробуйте что-то подобное в своем файле gulp:

'use strict';

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

gulp.task('default', ['browser-sync'], function () {});

gulp.task('browser-sync', ['nodemon'], function() {
    browserSync.init(null, {
        proxy: "http://localhost:3002"
    });
});

gulp.task('nodemon', function (cb) {

    var started = false;

    return nodemon({
        script: 'app.js'
    }).on('start', function () {
        // to avoid nodemon being started multiple times
        if (!started) {
            cb();
            started = true; 
        } 
    });
});