• 欢迎访问大姚哥前端笔记
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏吧
  • 欢迎留言o(∩_∩)o 哈哈

Browsersync+gulp+nodemon实现Express项目自动刷新

Node.js dayaoge 157次浏览

一直对NodeJs念念不忘,最近清闲点了,开始折腾折腾。
起一个Express项目,发现更改一点东西每次都得重启服务,ctrl+c然后再npm start效率太低啊。对于习惯了前端模块自动刷新,表示这个不能忍啊。
这里我们利用 Browsersync、gulp、gulp-nodemon来实现

1、安装dev依赖包

npm install --save-dev browser-sync
npm install --save-dev gulp
npm install --save-dev gulp-nodemon

2、在项目根目录新建 gulpfile.js

先用nodemon启动项目,成功后再用browersync监听各个文件夹变动来实现刷新。
gulpfile.js

var gulp = require('gulp');
// 调用 .create() 意味着你得到一个唯一的实例并允许您创建多个服务器或代理。
var browserSync = require('browser-sync').create();
// 这里reload不加括号,只引用不调用
// var reload = browserSync.reload;
var nodemon = require('gulp-nodemon');
gulp.task('server', function() {
    nodemon({
        script: './bin/www',
        // 忽略部分对程序运行无影响的文件的改动,nodemon只监视js文件,可用ext项来扩展别的文件类型
        ignore: ["gulpfile.js", "node_modules/", "public/**/*.*"],
        env: {
            'NODE_ENV': 'development'
        }
    }).on('start', function() {
        browserSync.init({
            proxy: 'http://localhost:3000',
            files: ["public/**/*.*", "views/**", "routes/**"],
            port:8080
        }, function() {
            console.log("browser refreshed.");
        });
    });
});

如果您已经有其他本地服务器环境PHP、Node或类似的,您需要使用代理模式。这里用8080端口来代理express启动地址3000。

到这就可以愉快的开发了。


小白公园 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权 , 转载请注明Browsersync+gulp+nodemon实现Express项目自动刷新
喜欢 (1)