我如何添加实时重装到我的服务器的NodeJS

问题描述 投票:12回答:7

这是我可以运行我的服务器的NodeJS,我需要liverealord我的服务器当我做在前端开发更改代码

"start": "node server.js"
node.js reactjs express livereload
7个回答
5
投票

第一:

npm install -g nodemon

下一脚本行添加到您的package.json

"live": "nodemon server.js" 

现在,当你住故宫,它会住重装

详细内容见https://github.com/remy/nodemon

如果更新还需要实况页面重载

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

详细内容见https://github.com/napcs/node-livereload


3
投票

从我的设置的一个例子:

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

它实际上是在本地主机上启动两个服务器:在服务器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>

如果你不transpile /编译/预处理你的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
投票
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

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或其他地方),Express服务器侦听端口3001。

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

接下来的事情就是在一口运行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']);

当运行在终端一饮而尽,它会开始看服务器以及清凉的浏览器中的任何文件的变化。

虽然我们指定Express服务器端口3001,我们的应用程序将工作在端口3002,正如我们在浏览器同步写。 3001将被用作代理。


1
投票

如果使用grunt,有现场重装NPM包grunt-contrib-watch

看看另外一个叫grunt-express-server可以一起工作。


0
投票

您可以使用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

0
投票

使用NPM呼包livereload

nodemon使用它结合所以无论客户端和服务器端的工作完美无缺。

npm install livereload nodemon --save

--save-dev的。我知道我知道!

添加浏览器扩展。可用于Safari浏览器,火狐和谷歌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键的一对夫妇再次重新加载,使变化。我不知道这是否是一个浏览器缓存的问题或包装问题。

© www.soinside.com 2019 - 2024. All rights reserved.