Как добавить live-перезагрузку на сервер nodejs

Ответ 1

первый:

npm install -g nodemon

затем добавьте строку скрипта в ваш package.json

"live": "nodemon server.js" 

теперь, когда вы живете npm, он будет жить перезагрузить

для получения более подробной информации смотрите https://github.com/remy/nodemon

обновите, если необходима перезагрузка страницы

npm install -g livereload
livereload . -w 1000 -d

для получения более подробной информации см. https://github.com/napcs/node-livereload

Ответ 2

Перезапуск сервера - это одно, а обновление браузера - это другое. Для просмотра сервера я использую nodemon. Nodemon может видеть, когда происходят изменения в любых типах файлов. Но nodemon не может обновить страницу браузера. Для этого я использую браузерную синхронизацию.

Я использую оба в глотке.

Итак, зависимости от package.json, чтобы он работал:

"devDependencies": {
"browser-sync": "^2.24.5",
"gulp": "^3.9.1",
"gulp-nodemon": "^2.2.1"
}

В файле сервера (мой сервер находится в. /bin/www, ваш может быть в server.js, app.js или в другом месте), экспресс-сервер прослушивает порт 3001.

var port = normalizePort(process.env.PORT || '3001');
var server = http.createServer(app);
server.listen(port);

Далее нужно запустить синхронизацию nodemon и браузера в gulp. Полное содержание gulpfile.js

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

gulp.task('gulp_nodemon', function() {
  nodemon({
    script: './bin/www', //this is where my express server is
    ext: 'js html css', //nodemon watches *.js, *.html and *.css files
    env: { 'NODE_ENV': 'development' }
  });
});

gulp.task('sync', function() {
  browserSync.init({
    port: 3002, //this can be any port, it will show our app
    proxy: 'http://localhost:3001/', //this is the port where express server works
    ui: { port: 3003 }, //UI, can be any port
    reloadDelay: 1000 //Important, otherwise syncing will not work
  });
  gulp.watch(['./**/*.js', './**/*.html', './**/*.css']).on("change", browserSync.reload);
});

gulp.task('default', ['gulp_nodemon', 'sync']);

При запуске gulp в терминале, он начнет наблюдать за сервером, а также обновлять браузер при изменении любых файлов.

Хотя мы указываем порт 3001 на экспресс-сервере, наше приложение будет работать на порту 3002, как мы пишем в браузере-синхронизации. 3001 будет использоваться в качестве прокси.

Ответ 3

npm install browser-refresh -g

и добавьте свой основной JS

 if (process.send) {
     process.send('online');
 }

например

app.listen(port, function() {
    console.log('Listening on port %d', port);

    if (process.send) {
        process.send('online');
    }
});

и добавьте свою страницу индекса перед тегом закрытия тела.

<script src="{process.env.BROWSER_REFRESH_URL}"></script>

и запустить ваш сервер на терминале вместо узла server.js

browser-refresh server.js

Ответ 4

Пример из моей настройки:

livereload.js(так что это будет ваш server.js, конечно, используйте только части, связанные с загрузкой в ​​потоке, не нужно заменять сервер разработки)

const path = require('path');
const fs = require('fs');

const livereload = require('livereload');
const lrserver = livereload.createServer();

const compiled = path.join( __dirname, "dist");
lrserver.watch( compiled ); 

const connect = require('connect');
const stat = require('serve-static');

const server = connect();
server.use( stat( compiled ));

server.listen( 3033 );

console.log( 'Dev server on localhost:3033' );

На самом деле он запускает два сервера на локальном хостинге: сервер прослушивания на сервере :35729 и статический файловый сервер на :3033.

Livereload наблюдает каталог dist, который содержит скомпилированные файлы (js, css, html). Вам нужно добавить этот фрагмент на каждую страницу HTML, которая должна перезагрузиться:

<script>
 document.write('<script src="http://' + (location.host || 'localhost').split(':')[0] +
                ':35729/livereload.js?snipver=1"></' + 'script>');
</script>

Если вы не перегружаете/не компилируете/не обрабатываете код js/css/html (т.е. напрямую редактируете файлы, которые обслуживаются), то наблюдайте исходный каталог, и все готово. В противном случае вам потребуется задача, отслеживающая исходный каталог для изменений и компиляции в каталог dist, который наблюдается с помощью функции "загрузка":)

Соответствующие части моего пакета .json:

"scripts": {
    "build": "npm run build:js && npm run build:css",
    "prewatch": "node livereload.js &",
    "watch": "node ./node_modules/watch-run/bin/watch -p './src/**' npm run build",
  },
"devDependencies": {
    "connect": "^3.6.2",
    "livereload": "^0.6.2",
    "serve-static": "^1.12.3",
    "watch-run": "^1.2.5"
  }

$ npm run watch создает проект и запускает файловые серверы с файловой системой + статические файлы. (задачи build:* опущены для краткости).

Ответ 5

Если grunt используются, есть НПЙ пакет grunt-contrib-watch для живого перезаряжания.

Проверьте еще один, называемый grunt-express-server который может работать вместе.

Ответ 6

Вы можете использовать nodemon.
Он будет следить за вашими файлами проекта и перезапускать сервер при его изменении.

Вы можете установить его глобально:

npm install -g nodemon

запустите его в каталоге проектов

cd ./my-project
nodemon

Вы также можете добавить его в зависимости от проекта dev и использовать его с npm script:

npm install --save-dev nodemon

Затем добавьте простой script к вашему package.json:

"scripts": {
    "start": "node server.js",
    "dev": "nodemon"
}

то вы можете просто запустить следующую команду:

npm run dev

Ответ 7

Используйте пакет npm под названием livereload.

Используйте его в сочетании с nodemon, поэтому обе стороны клиента и сервера работают безупречно.

npm install livereload nodemon --save

- сохранить-DEV. Я знаю, я знаю!

Добавить расширение браузера. Доступно для Safari, Firefox и Google Chrome. Получите их здесь.

Убедитесь, что сценарии находятся внутри package.json.

  "scripts": {
"start": "nodemon server.js && livereload"

}

server.js - моя точка входа.

Внутри server.js добавьте следующее:

const livereload = require('livereload');
const reload = livereload.createServer();
reload.watch(__dirname + "/server.js");

server.js - это файл, который я хочу просмотреть в режиме просмотра. Вы можете добавить любую директорию, а не файл.

reload.watch(__dirname + "/public");

В терминале:   npm start

Нажмите на значок расширения в браузере для подключения.

Вы также можете использовать функцию peneload и nodemon отдельно в разных терминалах.

"scripts": {
    "start": "nodemon server.js",
    "livereload": "livereload"
  }

npm start

npm livereload

npm livereload -p PORT_NUMBER, если по умолчанию используется порт.

Обновление: иногда он не работает при сохранении один раз. Еще пара команд Ctrl + S перезагружается и вносит изменения. Я не знаю, является ли это проблемой кэширования браузера или проблемой пакета.