express+gulp+gulp-nodemon+browser-sync自动刷新

express自动生成项目。不在赘述

1、在项目根目录下新建终端,依次运行如下命令

npm install gulp --save-dev

npm install gulp-nodemon --save-dev

npm install browser-sync --save-dev

package.json会有如下依赖：

"devDependencies": {
  "browser-sync": "^2.18.13",
  "gulp": "^3.9.1",
  "gulp-nodemon": "^2.2.1"
}

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

配置如下：

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

 //这个可以让express启动
 gulp.task("node", function() {
     nodemon({
         script: './bin/www',
         ext: 'js jade',
         env: {
             'NODE_ENV': 'development'
         }
     })
 });

 // gulp.task('js-watch', ['js'], browserSync.reload);

 gulp.task('server',["node"], function() {

     var files = [
         'views/**/*.jade',
         'routes/**/*.js',
         'public/**/*.css',
         'app.js'
     ];

     browserSync.init(files, {
         proxy: 'http://localhost:3000',
         browser: ['chrome','safari'],
         notify: false,
         port: 4001,
         open:false,
         ghostMode: {
             clicks: true,
             scroll: true
         }
     });

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

3、运行：

gulp server

结果，修改jade，界面能够立即刷新，但是修改routes下面的js文件，尤其是修改参数，界面不能立即刷新。有时候需要等待很长时间.尚不清楚原因。不过修改js文件手动刷新界面的话不影响使用。

参考：

https://www.browsersync.io/docs/gulp

https://www.cnblogs.com/moreyear/p/6020305.html