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

配置如下：

 1 // 添加引用
 2 var gulp = require('gulp');
 3 var browserSync = require('browser-sync').create();
 4 var reload = browserSync.reload;
 5 var nodemon = require('gulp-nodemon');
 6 
 7 //这个可以让express启动
 8 gulp.task("node", function() {
 9     nodemon({
10         script: './bin/www',
11         ext: 'js jade',
12         env: {
13             'NODE_ENV': 'development'
14         }
15     })
16 });
17 
18 // gulp.task('js-watch', ['js'], browserSync.reload);
19 
20 gulp.task('server',["node"], function() {
21 
22     var files = [
23         'views/**/*.jade',
24         'routes/**/*.js',
25         'public/**/*.css',
26         'app.js'
27     ];
28 
29     browserSync.init(files, {
30         proxy: 'http://localhost:3000',
31         browser: ['chrome','safari'],
32         notify: false,
33         port: 4001,
34         open:false,
35         ghostMode: {
36             clicks: true,
37             scroll: true
38         }
39     });
40 
41     gulp.watch(files).on("change", reload);
42 });

3、运行：

gulp server

 

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

 参考：

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

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

 

posted @ 2017-12-05 12:40  wjwdive  阅读(286)  评论(0)  编辑  收藏  举报