在express中使用gulp、browser-sync及gulp-nodemon实现前后端自动刷新

最近在使用express框架及mysql,由于前端和后端代码修改后都需要实现自动刷新功能,刚开始我后端使用的是nodemon进行代码修改后自动刷新,后来涉及到前端,自然而然我想到使用browser-sync进行刷新,按照官网给出的代理模式进行操作,虽然能够进行代理,但是还是不能后实时刷新前端代码,后来采用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),这样就可以实现了前后端自动刷新功能了~

发表评论

关闭菜单