node express4.x框架+gulp4.x实现前后端自动刷新

安装express框架

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

注意：在express4.x版本中已经不含有express命令了。
需要安装 express-generator

npm i -g express
npm i -g express-generator

2. 创建项目

• 使用express命令创建工程，默认以jade作为模板引擎，模板文件为.jade类型；
  jade的语法与html有较大差异，对缩进也是要求严格的。
  express APP_NAME
• 以ejs作为模板引擎创建项目
  express -e APP_NAME

express -e express_demo

3. 安装所有依赖包

npm i

4. 将ejs模板改为html
   手动将.ejs文件换成.html文件后，还需要对app.js文件进行设置

var ejs = require('ejs');
.......
// app.set('view engine', 'ejs');
app.engine('html', ejs.__express)
app.set('view engine', 'html')

5. 启动此应用

npm start

打开浏览器，输入localhost:3000

部署自动化刷新页面

1. 安装gulp

npm i -S gulp

2. 安装后端代码自动刷新插件gulp-nodemon

npm i -S gulp-nodemon

3. 安装browser-sync

npm i -S browser-sync

4. 新建gulpfile.js 文件，文件中的代码如下:

// 添加引用
var gulp = require('gulp');
var browserSync = require('browser-sync');
var reload = browserSync.reload;
var nodemon = require('gulp-nodemon');

// 这个可以让express启动
let node = (cb) => {
  nodemon({
    script: './bin/www',
    ext: 'js html',
    env: {
      'NODE_ENV': 'development'
    }
  });
  cb()
}

let server = (cb) => {
  var files = [
    'views/**/*.html',
    'views/**/*.ejs',
    'views/**/*.jade',
    'public/**/*.*',
    'routes/**/*.*'
  ];

  browserSync.init({
    proxy: 'http://localhost:3000', //  和express项目里bin/www文件的配置中的var port = normalizePort(process.env.PORT || '3000')要一致
    browser: 'chrome',
    notify: false,
    port: 4001 //  这个是browserSync对http://localhost:3000实现的代理端口
  });
  gulp.watch(files).on("change", reload);
  cb()
}

gulp.task('default', gulp.series(node, server))

5. 在项目根目录启动此应用

gulp default