Question

这是我如何运行我的服务器nodejs，当我对前端dev中的代码进行更改时，我需要liverealord我的服务器

"start": "node server.js"

Answer 1

<强>第一

SELECT LOGON_ID, SUM(FULL_PLLT_QTY), SHIFT_DT, PRI_GRP_CD
FROM TALLY_TRAN_MSTR
WHERE (PRI_GRP_CD = "PUT")
GROUP BY LOGON_ID, SHIFT_DT, PRI_GRP_CD

下一步将一个脚本行添加到package.json

npm install -g nodemon

现在，当你现场直播时，它会重新加载

有关详细信息，请参阅https://github.com/remy/nodemon

如果还需要实时页面重新加载，则

更新

"live": "nodemon server.js"

有关详细信息，请参阅https://github.com/napcs/node-livereload

Answer 2

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而不是node server.js

上启动服务器

browser-refresh server.js

Answer 3

重启服务器是一回事，刷新浏览器是另一回事。对于服务器观看，我使用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);

下一步是在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将用作代理。

Answer 4

我的设置示例：

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上启动了两个服务器：监听:35729的livereload服务器和: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:*个任务。）

Answer 5

您可以使用“ livereload”，“ connect-livereload”和“ nodemon”软件包将前端和后端更改实时重新加载到浏览器。这样，您就不需要Gulp。打包方式如下：

livereload打开一个高端口，并通知浏览器更改的公共文件
connect-livereload猴子用连接到此高端口的代码片段修补了每个投放的HTML页面
nodemon在更改的后端文件上重新启动服务器

在Express中设置实时重载

将Express设置为在nodemon引起的重启期间启动livereload服务器以监视公共目录并ping通浏览器：

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

使用nodemon启动Express

例如，使用专用监视脚本npm run watch，通过nodemon启动服务器。

这里的关键点是忽略livereload已经监视的公共目录。您还可以配置带有非默认扩展名的文件，例如pug和mustache，以进行监视。

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

您可以在"Refresh front and backend changes to browser with Express, LiveReload and Nodemon."

中阅读更长的解释

Answer 6

如果使用grunt，则有一个npm软件包grunt-contrib-watch用于实时重新加载。

签出另一个grunt-express-server，它们可以一起工作。

Answer 7

您可以使用nodemon 它会监视您项目的文件，并在您更改它们时重新启动服务器。

您可以全局安装：

npm install -g nodemon

在项目目录中运行它

cd ./my-project
nodemon

您还可以将其添加到项目的开发依赖项中，并从npm脚本中使用它：

npm install --save-dev nodemon

然后向package.json添加一个简单的脚本：

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

然后您只需运行以下命令：

npm run dev

Answer 8

使用名为livereload的npm包。

与nodemon结合使用，以便客户端和服务器端完美运行。

npm install livereload nodemon --save

- 保存-dev的。我知道，我知道！

添加浏览器扩展程序。适用于Safari，Firefox和Google Chrome。得到他们here。

确保将此脚本放在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如果默认为端口已被使用。

更新：有时它无法保存一次。再多几次Ctrl + S重新加载并进行更改。我不知道这是否是浏览器缓存问题或包问题。

如何将live-reload添加到我的nodejs服务器

8 个答案: