node express4 + 前端自动刷新

官网快速生成：http://www.expressjs.com.cn/starter/generator.html

1.安装  express

　　1.应用生成器工具 express-generator 可以快速创建一个应用的骨架。

　　$ npm install express-generator -g

　　2.如下命令创建了一个名称为 myapp 的 Express 应用。此应用将在当前目录下的 myapp 目录中创建，并且设置为使用 Pug 模板引擎

$ express --view=pug myapp

　　3.然后安装所有依赖包：

$ cd myapp
$ npm install

　　4.通过如下命令启动此应用：

npm start

---

2.部署自动化刷新页面

　　自动更新配置的 app.js 不用重启

　　法1.

　　在开发的时候，每次修改文件，都需要重启 express 服务，比较麻烦。使用nodemon，修改文件后可以自动重启 express 服务。

　　

npm install --save-dev nodemon

　　修改 package.json 的 scripts 内容：

"scripts": {
    "start": "node ./bin/www",
    "devstart": "nodemon ./bin/www"
  }

之后，使用

SET DEBUG=myapp:* & npm run devstart

　　

启动 express 服务。这样在开发过程中修改文件的时候，express服务就会自动重启，非常方便。

　　法2.

1. 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 文件，文件中的代码如下:
      1. 需要修改包内的gulp版本为3.9.1 gulp4的版本不支持以上写法

　　　　　　

// 添加引用
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/**/*.*',
    '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: 'http://localhost:3000', 记得要和express项目里 bin/www 文件的配置中的var port = normalizePort(process.env.PORT || '3000'); 要一致！（这里都是3000端口）

在命令行输入 gulp server 启动代理端口（也就是4001），这样就可以实现了前后端自动刷新功能了~

　

参考网站摘自：

https://www.jianshu.com/p/c5baef64563a

 

https://www.cnblogs.com/webSong/p/7429230.html