最近在使用express框架及mongodb绣夺，由于前端和后端代碼修改后都需要實(shí)現(xiàn)自動(dòng)刷新功能，剛開始我后端使用的是nodemon進(jìn)行代碼修改后自動(dòng)刷新欢揖，后來涉及到前端陶耍，自然而然我想到使用browser-sync進(jìn)行刷新，按照官網(wǎng)給出的代理模式進(jìn)行操作她混，雖然能夠進(jìn)行代理烈钞，但是還是不能后實(shí)時(shí)刷新前端代碼，后來搜索找到這篇文章 gulp+browserSync+nodemon 實(shí)現(xiàn)express 全端自動(dòng)刷新的實(shí)踐 按照作者提供的方法坤按，采用gulp毯欣、browser-sync及gulp-nodemon成功實(shí)現(xiàn)前后端自動(dòng)刷新。
這里記錄下步驟：
1臭脓、首先 肯定安裝gulp npm install --save-dev gulp
（如果之前沒有初始化酗钞，則需要npm init）
2、接下來安裝后端代碼自動(dòng)刷新插件gulp-nodemon npm install --save-dev gulp-nodemon
3、然后安裝browser-sync npm install --save-dev browser-sync
4砚作、在項(xiàng)目根目錄中新建gulpfile.js 文件窘奏，文件中的代碼如下:
// 添加引用
var browserSync = require('browser-sync');
var reload = browserSync.reload;
var nodemon = require('gulp-nodemon');
//這個(gè)可以讓express啟動(dòng)
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 //這個(gè)是browserSync對(duì)http://localhost:3000實(shí)現(xiàn)的代理端口
});
gulp.watch(files).on("change", reload);
});
上面代碼中的代理端口 proxy: 'http://localhost:3000', 記得要和express項(xiàng)目里 bin/www 文件的配置中的var port = normalizePort(process.env.PORT || '3000'); 要一致！（這里都是3000端口）
5葫录、在命令行輸入 gulp server 啟動(dòng)代理端口（也就是4001）蔼夜，這樣就可以實(shí)現(xiàn)了前后端自動(dòng)刷新功能了~
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
**本文版權(quán)歸本人即簡(jiǎn)書筆名：該賬戶已被查封 所有，如需轉(zhuǎn)載請(qǐng)注明出處压昼。謝謝！ *
