nodejs里的express自动刷新高级篇【转载】
2017-08-25 18:06
1791 查看
搬运自【简书:http://www.jianshu.com/p/2f923c8782c8】亲测可用哦!
最近在使用express框架及mongodb,由于前端和后端代码修改后都需要实现自动刷新功能,刚开始我后端使用的是nodemon进行代码修改后自动刷新,后来涉及到前端,自然而然我想到使用browser-sync进行刷新,按照官网给出的代理模式进行操作,虽然能够进行代理,但是还是不能后实时刷新前端代码,后来搜索找到这篇文章 gulp+browserSync+nodemon 实现express 全端自动刷新的实践 按照作者提供的方法,采用gulp、browser-sync及gulp-nodemon成功实现前后端自动刷新。
这里记录下步骤:
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 文件,文件中的代码如下:
上面代码中的代理端口 proxy: 'http://localhost:3000', 记得要和express项目里 bin/www 文件的配置中的var port = normalizePort(process.env.PORT || '3000'); 要一致!(这里都是3000端口)
5、在命令行输入 gulp server 启动代理端口(也就是4001),这样就可以实现了前后端自动刷新功能了~
作者:该帐号已被查封
链接:http://www.jianshu.com/p/2f923c8782c8
來源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
最近在使用express框架及mongodb,由于前端和后端代码修改后都需要实现自动刷新功能,刚开始我后端使用的是nodemon进行代码修改后自动刷新,后来涉及到前端,自然而然我想到使用browser-sync进行刷新,按照官网给出的代理模式进行操作,虽然能够进行代理,但是还是不能后实时刷新前端代码,后来搜索找到这篇文章 gulp+browserSync+nodemon 实现express 全端自动刷新的实践 按照作者提供的方法,采用gulp、browser-sync及gulp-nodemon成功实现前后端自动刷新。
这里记录下步骤:
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.jianshu.com/p/2f923c8782c8
來源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
相关文章推荐
- nodejs里的express自动刷新gulp-express使用【转载】
- nodejs的express自动生成项目框架
- ajax注册用户无刷新自动验证代码及调用代码(转载)
- 自动刷新网页(转载+整理)
- [Nodejs] nodemon:自动重启与页面刷新
- 使用Jenkins自动部署nodejs应用 (转载)
- nodejs在线xlsx转json,使用gulp实现文件更改自动刷新
- nodejs的express自动生成项目框架-2016
- express+gulp+gulp-nodemon+browser-sync自动刷新
- gulp+browserSync+nodemon 实现express 全端自动刷新的实践
- T-SQL高级查询 自动保存(转载)
- 浏览器自动刷新——基于Nodejs的Gulp LiveReload与VisualStudio完美结合。
- 转载(页面自动刷新)
- nodejs的express自动生成项目框架-2016
- [转载]Grunt插件之LiveReload 实现页面自动刷新,所见即所得编辑
- 转载:5项浏览器网页自动刷新技巧
- 【转载】 IE/Firefox每次刷新时自动检查网页更新,无需手动清空缓存的设置方法
- 详解nodejs的express如何自动生成项目框架
- nodejs小问题:express不是内部或外部命令(转载)
- NodeJS-003-自动刷新