Node.JS 自动刷新的实现方法: 采用 gulp,browser-sync 及 gulp-nodemon 可以实现自动刷新, 使用 NPM install 命令进行安装, 在项目根目录中新建 JS 文件添加代理端口, 使用命令 gulp server 启动代理端口即可.
Node.JS 自动刷新的实现方法如下:
1, 首先安装 gulp
- NPM install --save-dev gulp
- (如果之前没有初始化, 则需要 NPM init)
2, 接下来安装后端代码自动刷新插件 gulp-nodemon
NPM install --save-dev gulp-nodemon
3, 然后安装 browser-sync
NPM install --save-dev browser-sync
4, 在项目根目录中新建 gulpfile.JS 文件, 文件中的代码如下:
- // 添加引用
- var gulp=require('gulp');
- var browserSync = require('browser-sync');
- var reload = browserSync.reload;
- var nodemon = require('gulp-nodemon');
- // 这个可以让 express 启动
- gulp.task("node", function() {
- nodemon({
- script: './bin/www',
- ext: 'js html',
- env: {
- 'NODE_ENV': 'development'
- }
- })
- });
- gulp.task('server', ["node"], function() {
- var files = [
- 'views/**/*.html',
- 'views/**/*.ejs',
- 'views/**/*.jade',
- 'public/**/*.*'
- ];
- //gulp.run(["node"]);
- browserSync.init(files, {
- proxy: 'http://localhost:3000',
- browser: 'chrome',
- notify: false,
- port: 4001 // 这个是 browserSync 对 http://localhost:3000 实现的代理端口
- });
- gulp.watch(files).on("change", reload);
- });
上面代码中的代理端口 proxy: 'http://localhost:3000', 记得要和 express 项目里 bin/www 文件的配置中的 var port = normalizePort(process.env.PORT || '3000'); 要一致!(这里都是 3000 端口)
5, 在命令行输入 gulp server 启动代理端口 (也就是 4001), 这样就可以实现了前后端自动刷新功能了.
来源: http://www.css88.com/qa/node-js/10792.html