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