nodejs自动刷新如何实现的? - 网站

nodejs自动刷新如何实现的?

分类:Node.js常见问题 · 发布时间:2019-08-05 15:13 · 阅读:3421

nodejs自动刷新的实现方法:采用gulp、browser-sync及gulp-nodemon可以实现自动刷新,使用npm install命令进行安装,在项目根目录中新建js文件添加代理端口,使用命令gulp server启动代理端口即可。

nodejs自动刷新的实现方法如下:

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),这样就可以实现了前后端自动刷新功能了。

标签:
nodejs

相关文章

如何设置 nodejs 的环境变量

在前端开发过程中,我们需要对 application 运行的环境进行设置,一般会包括开发环境development,生产环境production,每个环境可以对应不同的一些配置,例如不同环境下请求的地址...

谈谈Node.js与JavaScript的差异

Javascript是一种web前端语言,主要用于web开发中,由浏览器解析执行。Node.js是一个可以快速构建网络服务及应用的平台,是用Javascript语言构建的服务平台。

npm install安装报错怎么解决?

解决方法:1、报“operation not permitted”错误,通过“npm i 包名 --no-optional”解决;2、报“Missing: chromedriver”错误,表示没有安装chromedriver,安装一下即可。

怎么使用npm下载vue.js?

使用npm下载vue.js的方法:1、安装node.js和npm;2、安装cnpm;3、使用命令cnpm install -g vue-cli来安装即可。

vue.js和node.js是什么关系?

vue.js和node.js并没有关系,vue.js是前端框架,算是js的三大框架之一吧,node.js是后端开发语言,同php、java、c#一样的。但是他们可以配合使用。

返回分类 返回首页