web-dev-qa-db-ja.com

nodejsサーバーにライブリロードを追加するにはどうすればよいですか

これは、どのようにサーバーnodejsを実行できますか？

"start": "node server.js"
node.jsreactjsexpresslivereload
12
Ahmed Rebai

最初：

npm install -g nodemon

nextpackage.jsonにスクリプト行を追加します

"live": "nodemon server.js"

npmをライブにすると、リロードがライブになります

詳細については https://github.com/remy/nodemon を参照してください

updateライブページのリロードも必要な場合

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

詳細については、 https://github.com/napcs/node-livereload を参照してください

5
Mark Essel

サーバーを再起動することとブラウザーを更新することは別のことです。サーバー監視には、nodemonを使用します。 Nodemonは、どのタイプのファイルに変更が発生したかを確認できます。ただし、nodemonはブラウザページを更新できません。このために、ブラウザの同期を使用します。

Gulpで両方を使用します。

したがって、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);

次に、gulpでnodemonとブラウザーの同期を実行します。 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
Alonad
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ではなくtermialでサーバーを起動します

browser-refresh server.js
3
Murat Çimen

私のセットアップの例：

livereload.js（これはserver.jsになります。もちろん、livereloadに関連する部分のみを使用し、開発サーバーを交換する必要はありません）

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' );

実際には、localhostで2つのサーバーを起動します。liveReloadサーバーは:35729でリッスンし、静的ファイルサーバーは:3033でリッスンします。

Livereloadは、コンパイルされたファイル（js、css、html）を含むdistディレクトリを監視します。リロードするすべてのHTMLページにこのスニペットを追加する必要があります。

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

Js/css/htmlコードをトランスパイル/コンパイル/プリプロセスしない場合（つまり、提供するファイルを直接編集する場合）、ソースディレクトリを確認して完了です。それ以外の場合は、ソースディレクトリの変更を監視し、livereloadで監視されるdistディレクトリにコンパイルするタスクが必要です。

Package.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はプロジェクトをビルドし、livereload +静的ファイルサーバーを開始します。 （build:*タスクは簡潔にするために省略されています）。

3
pawel

gruntが使用されている場合、npmパッケージgrunt-contrib-watchライブリロード用。

別のgrunt-express-serverそれは一緒に働くことができます。

1
themefield

livereload というnpmパッケージを使用します。

nodemon と組み合わせて使用​​すると、クライアント側とサーバー側の両方が問題なく動作します。

npm install livereload nodemon --save

-- 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は、livereloadで監視するファイルです。ファイルの代わりに任意のディレクトリを追加することもできます。

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

ターミナルで：npm start

ブラウザの拡張機能アイコンをクリックして接続します。

また、異なる端末でlivereloadとnodemonを別々に使用することもできます。

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

npm start

npm livereload

npm livereload -p PORT_NUMBERデフォルトがポートの場合は既に使用されています。

更新：一度保存すると機能しない場合があります。さらに2、3のCtrl + Sが再ロードされ、変更が加えられます。これがブラウザのキャッシュの問題なのかパッケージの問題なのかわかりません。

0
therj

nodemon を使用できます。
プロジェクトのファイルを監視し、変更するとサーバーを再起動します。

グローバルにインストールできます：

npm install -g nodemon

あなたのプロジェクトディレクトリで実行してください

cd ./my-project
nodemon

プロジェクトのdev依存関係に追加して、npmスクリプトから使用することもできます。

npm install --save-dev nodemon

次に、package.jsonに簡単なスクリプトを追加します。

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

次のコマンドを実行するだけです：

npm run dev
0
Kayvan Mazaheri