gulp+browserSync+nodemon 实现express 全端自动刷新的实践

2023-01-08 22:17:30

学习过程宝宝心里苦，不能怨*。。

兴趣所致，一直放不下nodejs的学习，时隔多日，又把express捡起来打算重新再学学，一直没什么太大的长进，和实际的项目经验。真的醉了，太懒了。

今天在重新研究supervisor的时候，突然觉得这东西只有在服务端文件修改时才会触发刷新，前端样式文件模板等等刷新时不会，

能实现前端修改也自动刷新不？想想平时自己用gulp 搭虚拟服务器，用browser自动刷新，于是打算试试。

gulp+browserSync 算是原来就有的，现在应该把目标分几步来实现，

1、在gulp里运行 express 启动的命令

2、实现自动刷新

在google+baidu 下不停的找啊搜啊，找啊搜啊，猛然发现了 gulp 好插件，gulp-nodemon! 看完介绍赶紧安装！

顺便提一句，npm 插件为了所有项目能共用，我把node_module放在了工作文件夹的根目录了，所以gulp插件也都安装在这里，而不是在express的项目当中，一份通用的package.json还是很重要的。

a\先安装

npm install --save-dev gulp-nodemon

b\修改gulpfile配置文件

 // 添加引用

 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:4000',

         browser: 'chrome',

         notify: false,

         port: 4001

     });

     gulp.watch(files).on("change", reload);

 });