最近在使用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 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），这样就可以实现了前后端自动刷新功能了~
browser-sync start --server --files "css/*.css, *.html" -no-ghost-mode --open external --host=10.0.0.0
browser-sync start --server --files "*.css, *.html , *.js" --reload-delay 800 -no-ghost-mode --open external --host=10.0.0.0
**本文版权归本人即简书笔名：该账户已被查封 所有，如需转载请注明出处。谢谢！ *
