は

Question

これは私が私のサーバーnodejsを実行することができますどのように、私はフロントエンドDEV

"start": "node server.js" 

Answer 1

のコードに変更を加える際に自分のサーバーをliverealordする必要があります最初：

npm install -g nodemon 

次あなたのpackage.jsonにスクリプト行を追加します

"live": "nodemon server.js" 

今

あなたはそれがあなたがnodemonを使用することができますhttps://github.com/remy/nodemon

Answer 2

を参照してください詳細については

をリロード生きるよ住んNPM。
変更したときにプロジェクトのファイルを監視し、サーバーを再起動します。あなたはグローバルにインストールすることができます

：

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 

Answer 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> 

と私のセットアップからtermial代わりにノードserver.js

browser-refresh server.js 

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

実際に起動しますlocalhost上の2つのサーバー：livereloadサーバーは:35729と、静的ファイルサーバーは:3033です。

ライブリロードは、コンパイル済みファイル（js、css、html）を含むdistディレクトリを観察します。その後、（つまり、あなたが直接提供されているファイルを編集）あなたが/前処理あなたのJS/CSS/HTMLコードをコンパイル/ transpileない場合

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

：あなたはリロードする必要があり、すべてのHTMLページに、このスニペットを追加する必要がありますソースディレクトリを観察すれば完了です。

"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によって観察されたdistディレクトリにコンパイルタスク:)私のpackage.jsonの

関連部品が必要ですlivereload +静的ファイルサーバー。 （簡略化のため、build:*タスクは省略されています）。