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