最新发现有问题,已更新,请转到 Express自动刷新
最近使用了下express进行开发,每次修改代码都需要Ctrl+C 又npm start ,开发效率大大打折扣,所以再网上找了下一些文章,本人综合如下,如有不对敬请笑纳!
1、首先 肯定安装gulp npm install --save-dev gulp
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() {
//此处的files为你所需要跟踪的文件,根据实际项目需要配置即可
var files = [
'views/**/*.html',
'views/**/*.ejs',
'views/**/*.jade',
'public/**/*.*',
'routes/*.*',
];
//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 中的端口需要与 ./bin/www 文件中的端口一致
5、在命令行输入 gulp server 启动代理端口(也就是4001),这样就可以实现了前后端自动刷新功能了
就这么简单就可以实现自动刷新了