先简单介绍一下项目大概情况，新公司入职后有一个Angular1的老项目，使用gulp构建的，要解决的问题是：1、添加开发环境代理（以前开发很痛苦），2、添加监听自动刷新
解决问题前先看了一下gulp构建项目的大概情况，不是很乐观昂~~~，依赖库、插件版本跨度很大（库、插件版本跨度大的话，非常多的坑，好的插件库升级后写法不兼容），这种坑只能是实打实的踩，没什么好的办法！
先来添加代理，本地我使用的gulp-connect服务，还安装了一个http-proxy-middleware插件来做代理，因为要代理HTTPS协议请求，一开始使用gulp-webserver代理调试了几次没有成功，HTTP的代理通了，最后换了http-proxy-middleware。配置项目如下
//引用服务的
var connect = require('gulp-connect');//服务
var proxy = require('http-proxy-middleware');//代理
gulp.task('webserver', gulp.series('build',function () {
connect.server({
root: './build', // 启动项目根目录
livereload: true, // 实时重新加载
port: 9090,
https: false, // 启动项目使用https
middleware: function(connect, opt) {
return [
proxy('/aaa', {
target: 'https://api.douban.com/v2/book/1220562',
pathRewrite: {
'^/api/old-path' : '/api/new-path', // 重写请求，比如我们源访问的是api/old-path，那么请求会被解析为/api/new-path
'^/api/remove/path' : '/path' // 同上
},
changeOrigin:true, // 默认false，是否需要改变原始主机头为目标URL
ws: true, // 是否代理websockets
})
]
}
});
}));
这样配置下来可以代理了，休息一会继续采坑。
接下来配置自动刷新，自动刷新一定是需要gulp.watch的，但是gulp的3版本和4版本写法变化很大，这点大家一定要注意，一开始没有想到时，我在这个问题上来来回回采坑，遇到问题按查阅的资料修改总是报错，非常恼火。
我的watch是这样配置的
gulp.task('watcher', gulp.series(function () {
gulp.watch(['./src/**'], gulp.series('build'));
}));
//这个 gulp.series('build') 3、4版本写法就不一样，大家注意
gulp.task('images', gulp.series('clean-images', function imagesTask() {
log('Compressing and copying images');
return gulp
.src(config.images)
.pipe(gulp.dest(config.build + 'images'))
.pipe(connect.reload());
}));
// .pipe(connect.reload()) 这句的意思就是解析编译好当前的task后，重新load一下connect服务
最后在一个并行执行task的时候又踩了一个深深的坑，也是gulp3、4版本写法不一致导致的
gulp.task('start', gulp.series(gulp.parallel('webserver','watcher')));
