Вот как я могу запускать свой сервер nodejs, мне нужно liverealord моего сервера, когда я вношу изменения в код в интерфейсе dev
"start": "node server.js"
Вот как я могу запускать свой сервер nodejs, мне нужно liverealord моего сервера, когда я вношу изменения в код в интерфейсе dev
"start": "node server.js"
первый:
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
Перезапуск сервера - это одно, а обновление браузера - это другое. Для просмотра сервера я использую 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 будет использоваться в качестве прокси.
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
Пример из моей настройки:
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:*
опущены для краткости).
Если grunt
используются, есть НПЙ пакет grunt-contrib-watch
для живого перезаряжания.
Проверьте еще один, называемый grunt-express-server
который может работать вместе.
Вы можете использовать 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
Используйте пакет 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 перезагружается и вносит изменения. Я не знаю, является ли это проблемой кэширования браузера или проблемой пакета.