这是我可以运行我的服务器的NodeJS,我需要liverealord我的服务器当我做在前端开发更改代码
"start": "node server.js"
第一:
npm install -g nodemon
下一脚本行添加到您的package.json
"live": "nodemon server.js"
现在,当你住故宫,它会住重装
详细内容见https://github.com/remy/nodemon
如果更新还需要实况页面重载
npm install -g livereload
livereload . -w 1000 -d
从我的设置的一个例子:
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:*
任务)。
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
重新启动服务器是一回事,刷新浏览器是另一回事。对于服务器看着我用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将被用作代理。
如果使用grunt
,有现场重装NPM包grunt-contrib-watch
。
看看另外一个叫grunt-express-server
可以一起工作。
您可以使用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
使用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键的一对夫妇再次重新加载,使变化。我不知道这是否是一个浏览器缓存的问题或包装问题。